2016-05-23 50 views
0

我使用的是Flexbox网格(http://flexboxgrid.com/),我试图让我的列高度相等,而不是拥有单独的高度。有没有人知道如何做到这一点,因为我似乎无法在文档中找到任何内容。Flexbox网格 - 等高线列

<div class="container-fluid"> 
    <div class="row middle-xs"> 
    <div class="col-sm-6"> 
     <div class="motability-bg"> 
     <img src="/img/new-car-template/motab-bg.jpg" alt="motability seat"> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="motability-content-bg"></div> 
     <div class="motability-content"> 
     <h1>Motability</h1> 
     <p>Hello</p> 
     </div> 
    </div> 
    </div> 
</div> 

目前我的img标签的列大于我的内容列。任何想法如何让他们平等?

谢谢,尼克

+0

您使用的引导?如果是的话:http://v4-alpha.getbootstrap.com/getting-started/flexbox/ –

+0

不,我使用上面提到的链接:http://flexboxgrid.com/ –

+0

可能的指导:http:// stackoverflow。 COM/A /3597276分之33815389 –

回答

0

不使用类middle-xs搁置行下面

.middle-xs { 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center 
} 

片段:

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ 
 

 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
main, 
 
nav, 
 
section, 
 
summary { 
 
    display: block 
 
} 
 

 
audio, 
 
canvas, 
 
video { 
 
    display: inline-block 
 
} 
 

 
audio:not([controls]) { 
 
    display: none; 
 
    height: 0 
 
} 
 

 
[hidden], 
 
template { 
 
    display: none 
 
} 
 

 
html { 
 
    font-family: sans-serif; 
 
    -ms-text-size-adjust: 100%; 
 
    -webkit-text-size-adjust: 100% 
 
} 
 

 
a { 
 
    background: 0 0 
 
} 
 

 
a:focus { 
 
    outline: thin dotted 
 
} 
 

 
a:active, 
 
a:hover { 
 
    outline: 0 
 
} 
 

 
h1 { 
 
    font-size: 2em; 
 
    margin: .67em 0 
 
} 
 

 
abbr[title] { 
 
    border-bottom: 1px dotted 
 
} 
 

 
b, 
 
strong { 
 
    font-weight: 700 
 
} 
 

 
dfn { 
 
    font-style: italic 
 
} 
 

 
hr { 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    height: 0 
 
} 
 

 
mark { 
 
    background: #ff0; 
 
    color: #000 
 
} 
 

 
code, 
 
kbd, 
 
pre, 
 
samp { 
 
    font-family: monospace, serif; 
 
    font-size: 1em 
 
} 
 

 
q { 
 
    quotes: "\201C" "\201D" "\2018" "\2019" 
 
} 
 

 
small { 
 
    font-size: 80% 
 
} 
 

 
sub, 
 
sup { 
 
    font-size: 75%; 
 
    line-height: 0; 
 
    position: relative; 
 
    vertical-align: baseline 
 
} 
 

 
sup { 
 
    top: -.5em 
 
} 
 

 
sub { 
 
    bottom: -.25em 
 
} 
 

 
img { 
 
    border: 0 
 
} 
 

 
svg:not(:root) { 
 
    overflow: hidden 
 
} 
 

 
figure { 
 
    margin: 0 
 
} 
 

 
fieldset { 
 
    border: 1px solid silver; 
 
    margin: 0 2px; 
 
    padding: .35em .625em .75em 
 
} 
 

 
legend { 
 
    border: 0; 
 
    padding: 0 
 
} 
 

 
button, 
 
input, 
 
select, 
 
textarea { 
 
    font-family: inherit; 
 
    font-size: 100%; 
 
    margin: 0 
 
} 
 

 
button, 
 
input { 
 
    line-height: normal 
 
} 
 

 
button, 
 
select { 
 
    text-transform: none 
 
} 
 

 
button, 
 
html input[type=button], 
 
input[type=reset], 
 
input[type=submit] { 
 
    -webkit-appearance: button; 
 
    cursor: pointer 
 
} 
 

 
button[disabled], 
 
html input[disabled] { 
 
    cursor: default 
 
} 
 

 
input[type=checkbox], 
 
input[type=radio] { 
 
    box-sizing: border-box; 
 
    padding: 0 
 
} 
 

 
input[type=search] { 
 
    -webkit-appearance: textfield; 
 
    -moz-box-sizing: content-box; 
 
    -webkit-box-sizing: content-box; 
 
    box-sizing: content-box 
 
} 
 

 
input[type=search]::-webkit-search-cancel-button, 
 
input[type=search]::-webkit-search-decoration { 
 
    -webkit-appearance: none 
 
} 
 

 
button::-moz-focus-inner, 
 
input::-moz-focus-inner { 
 
    border: 0; 
 
    padding: 0 
 
} 
 

 
textarea { 
 
    overflow: auto; 
 
    vertical-align: top 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0 
 
} 
 

 
body { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 18px; 
 
    font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    font-weight: 400; 
 
    background: #EEE; 
 
    line-height: 1.4rem 
 
} 
 

 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    font-family: Gibson, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
    color: #001A33 
 
} 
 

 
h2 { 
 
    font-size: 2rem; 
 
    margin: 1rem 0 
 
} 
 

 
:focus { 
 
    outline-color: transparent; 
 
    outline-style: none 
 
} 
 

 
h2+p { 
 
    margin: 0 0 2rem 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #007FFF; 
 
    padding: 0 0 .2rem; 
 
    font-weight: 700 
 
} 
 

 
a:hover { 
 
    color: #007FFF 
 
} 
 

 
pre { 
 
    overflow-x: auto; 
 
    padding: 1.25em; 
 
    border: 1px solid #e6e6e6; 
 
    border-left-width: 5px; 
 
    margin: 1.6em 0; 
 
    font-size: .875em; 
 
    background: #fcfcfc; 
 
    white-space: pre; 
 
    word-wrap: normal 
 
} 
 

 
code { 
 
    color: #007FFF 
 
} 
 

 
.layout { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column 
 
} 
 

 
.page-nav { 
 
    box-sizing: border-box; 
 
    position: fixed; 
 
    padding: .5rem; 
 
    width: 100%; 
 
    background: 0 0 
 
} 
 

 
.page { 
 
    z-index: 0; 
 
    background: #EEE 
 
} 
 

 
.wrap { 
 
    box-sizing: border-box; 
 
    max-width: 1200px; 
 
    margin: 0 auto 
 
} 
 

 
.page-section { 
 
    padding-top: 3rem; 
 
    margin-bottom: 3rem 
 
} 
 

 
.page-features { 
 
    width: 100%; 
 
    background: #001a33; 
 
    overflow: scroll 
 
} 
 

 
.menu-button { 
 
    position: fixed; 
 
    top: .75rem; 
 
    right: .75rem; 
 
    z-index: 1; 
 
    box-sizing: border-box; 
 
    padding: .45rem; 
 
    height: 3rem; 
 
    width: 3rem; 
 
    background: #FFF; 
 
    border: 1px solid transparent; 
 
    user-select: none 
 
} 
 

 
.menu-button:hover { 
 
    border: 1px solid #007FFF; 
 
    border-radius: 2px 
 
} 
 

 
.menu-button:active { 
 
    background: #EEE; 
 
    border: 1px solid transparent 
 
} 
 

 
.open { 
 
    transform: translate3d(-15rem, 0, 0) 
 
} 
 

 
.menu-button-icon { 
 
    width: 2rem; 
 
    height: 2rem 
 
} 
 

 
.hero { 
 
    box-sizing: border-box; 
 
    padding: 2rem; 
 
    background: #FFF; 
 
    border: 1px solid #FFF; 
 
    border-radius: 2px 
 
} 
 

 
.hero-headline { 
 
    font-size: 3rem; 
 
    white-space: nowrap; 
 
    margin-bottom: 0 
 
} 
 

 
.hero-copy { 
 
    font-size: 1rem; 
 
    margin-bottom: 0; 
 
    padding: 0 2rem; 
 
    text-align: center 
 
} 
 

 
.slide-menu { 
 
    display: block; 
 
    position: fixed; 
 
    overflow: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    height: 100%; 
 
    width: 250px 
 
} 
 

 
.menu { 
 
    box-sizing: border-box; 
 
    padding-bottom: 5rem; 
 
    background: #001a33 
 
} 
 

 
.menu-header { 
 
    box-sizing: border-box; 
 
    padding: 3rem 3rem 0; 
 
    color: #eee 
 
} 
 

 
.menu-list { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none 
 
} 
 

 
.menu-list-item { 
 
    height: 3rem; 
 
    line-height: 3rem; 
 
    font-size: 1rem; 
 
    color: #007FFF; 
 
    background: 0 0; 
 
    transition: all .2s ease-in 
 
} 
 

 
.menu-link { 
 
    box-sizing: border-box; 
 
    padding-left: 3rem; 
 
    display: block; 
 
    color: #007FFF; 
 
    transition: color .2s ease-in 
 
} 
 

 
.menu-link:hover { 
 
    color: #3298ff; 
 
    border-bottom: 0 
 
} 
 

 
.link-top { 
 
    align-self: flex-end 
 
} 
 

 
.button { 
 
    position: relative; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    min-width: 11rem; 
 
    padding: 0 4rem; 
 
    margin: 1rem; 
 
    height: 3rem; 
 
    line-height: 3rem; 
 
    border: 1px solid #007FFF; 
 
    border-radius: 2px; 
 
    color: #007FFF; 
 
    font-size: 1.25rem; 
 
    transition: background-color, .15s 
 
} 
 

 
.button:hover { 
 
    background: #39F; 
 
    border-color: #39F; 
 
    color: #FFF; 
 
    text-shadow: 0 1px #007FFF 
 
} 
 

 
.button:active { 
 
    background: #007FFF; 
 
    color: #FFF; 
 
    border-top: 2px solid #06C 
 
} 
 

 
.box, 
 
.box-first, 
 
.box-large, 
 
.box-nested, 
 
.box-row { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    min-height: 1rem; 
 
    margin-bottom: 0; 
 
    background: #007FFF; 
 
    border: 1px solid #FFF; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    color: #fff 
 
} 
 

 
.box-row { 
 
    margin-bottom: 1rem 
 
} 
 

 
.box-first { 
 
    background: #06C; 
 
    border-color: #007FFF 
 
} 
 

 
.box-nested { 
 
    background: #036; 
 
    border-color: #007FFF 
 
} 
 

 
.box-large { 
 
    height: 8rem 
 
} 
 

 
.box-container { 
 
    box-sizing: border-box; 
 
    padding: .5rem 
 
} 
 

 
.page-footer { 
 
    box-sizing: border-box; 
 
    padding-bottom: 3rem 
 
} 
 

 
.tag { 
 
    color: #000; 
 
    font-weight: 400 
 
} 
 

 
.end { 
 
    text-align: end 
 
} 
 

 
.invisible-xs { 
 
    display: none; 
 
    visibility: hidden 
 
} 
 

 
.visible-xs { 
 
    display: block; 
 
    visibility: visible 
 
} 
 

 
@media only screen and (min-width:48rem) { 
 
    body { 
 
    font-size: 16px 
 
    } 
 
    .slide-menu { 
 
    width: 25% 
 
    } 
 
    .open { 
 
    transform: translate3d(0, 0, 0) 
 
    } 
 
    .hero-headline { 
 
    font-size: 6rem; 
 
    margin-bottom: 2rem 
 
    } 
 
    .hero-copy { 
 
    font-size: 1.25rem; 
 
    margin-bottom: 2rem 
 
    } 
 
    .box, 
 
    .box-first, 
 
    .box-large, 
 
    .box-nested, 
 
    .box-row { 
 
    padding: 1rem 
 
    } 
 
    .invisible-md { 
 
    display: none; 
 
    visibility: hidden 
 
    } 
 
    .visible-md { 
 
    display: block; 
 
    visibility: visible 
 
    } 
 
} 
 

 
.container, 
 
.container-fluid { 
 
    margin-right: auto; 
 
    margin-left: auto 
 
} 
 

 
.container-fluid { 
 
    padding-right: 2rem; 
 
    padding-left: 2rem 
 
} 
 

 
.row { 
 
    box-sizing: border-box; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 1 auto; 
 
    -ms-flex: 0 1 auto; 
 
    flex: 0 1 auto; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    margin-right: -.5rem; 
 
    margin-left: -.5rem 
 
} 
 

 
.row.reverse { 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: reverse; 
 
    -webkit-flex-direction: row-reverse; 
 
    -ms-flex-direction: row-reverse; 
 
    flex-direction: row-reverse 
 
} 
 

 
.col.reverse { 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: reverse; 
 
    -webkit-flex-direction: column-reverse; 
 
    -ms-flex-direction: column-reverse; 
 
    flex-direction: column-reverse 
 
} 
 

 
.col-xs, 
 
.col-xs-1, 
 
.col-xs-10, 
 
.col-xs-11, 
 
.col-xs-12, 
 
.col-xs-2, 
 
.col-xs-3, 
 
.col-xs-4, 
 
.col-xs-5, 
 
.col-xs-6, 
 
.col-xs-7, 
 
.col-xs-8, 
 
.col-xs-9, 
 
.col-xs-offset-1, 
 
.col-xs-offset-10, 
 
.col-xs-offset-11, 
 
.col-xs-offset-12, 
 
.col-xs-offset-2, 
 
.col-xs-offset-3, 
 
.col-xs-offset-4, 
 
.col-xs-offset-5, 
 
.col-xs-offset-6, 
 
.col-xs-offset-7, 
 
.col-xs-offset-8, 
 
.col-xs-offset-9 { 
 
    box-sizing: border-box; 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 0 auto; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
    padding-right: .5rem; 
 
    padding-left: .5rem 
 
} 
 

 
.col-xs { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex-grow: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    -webkit-flex-basis: 0; 
 
    -ms-flex-preferred-size: 0; 
 
    flex-basis: 0; 
 
    max-width: 100% 
 
} 
 

 
.col-xs-1 { 
 
    -webkit-flex-basis: 8.333%; 
 
    -ms-flex-preferred-size: 8.333%; 
 
    flex-basis: 8.333%; 
 
    max-width: 8.333% 
 
} 
 

 
.col-xs-2 { 
 
    -webkit-flex-basis: 16.667%; 
 
    -ms-flex-preferred-size: 16.667%; 
 
    flex-basis: 16.667%; 
 
    max-width: 16.667% 
 
} 
 

 
.col-xs-3 { 
 
    -webkit-flex-basis: 25%; 
 
    -ms-flex-preferred-size: 25%; 
 
    flex-basis: 25%; 
 
    max-width: 25% 
 
} 
 

 
.col-xs-4 { 
 
    -webkit-flex-basis: 33.333%; 
 
    -ms-flex-preferred-size: 33.333%; 
 
    flex-basis: 33.333%; 
 
    max-width: 33.333% 
 
} 
 

 
.col-xs-5 { 
 
    -webkit-flex-basis: 41.667%; 
 
    -ms-flex-preferred-size: 41.667%; 
 
    flex-basis: 41.667%; 
 
    max-width: 41.667% 
 
} 
 

 
.col-xs-6 { 
 
    -webkit-flex-basis: 50%; 
 
    -ms-flex-preferred-size: 50%; 
 
    flex-basis: 50%; 
 
    max-width: 50% 
 
} 
 

 
.col-xs-7 { 
 
    -webkit-flex-basis: 58.333%; 
 
    -ms-flex-preferred-size: 58.333%; 
 
    flex-basis: 58.333%; 
 
    max-width: 58.333% 
 
} 
 

 
.col-xs-8 { 
 
    -webkit-flex-basis: 66.667%; 
 
    -ms-flex-preferred-size: 66.667%; 
 
    flex-basis: 66.667%; 
 
    max-width: 66.667% 
 
} 
 

 
.col-xs-9 { 
 
    -webkit-flex-basis: 75%; 
 
    -ms-flex-preferred-size: 75%; 
 
    flex-basis: 75%; 
 
    max-width: 75% 
 
} 
 

 
.col-xs-10 { 
 
    -webkit-flex-basis: 83.333%; 
 
    -ms-flex-preferred-size: 83.333%; 
 
    flex-basis: 83.333%; 
 
    max-width: 83.333% 
 
} 
 

 
.col-xs-11 { 
 
    -webkit-flex-basis: 91.667%; 
 
    -ms-flex-preferred-size: 91.667%; 
 
    flex-basis: 91.667%; 
 
    max-width: 91.667% 
 
} 
 

 
.col-xs-12 { 
 
    -webkit-flex-basis: 100%; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
    max-width: 100% 
 
} 
 

 
.col-xs-offset-1 { 
 
    margin-left: 8.333% 
 
} 
 

 
.col-xs-offset-2 { 
 
    margin-left: 16.667% 
 
} 
 

 
.col-xs-offset-3 { 
 
    margin-left: 25% 
 
} 
 

 
.col-xs-offset-4 { 
 
    margin-left: 33.333% 
 
} 
 

 
.col-xs-offset-5 { 
 
    margin-left: 41.667% 
 
} 
 

 
.col-xs-offset-6 { 
 
    margin-left: 50% 
 
} 
 

 
.col-xs-offset-7 { 
 
    margin-left: 58.333% 
 
} 
 

 
.col-xs-offset-8 { 
 
    margin-left: 66.667% 
 
} 
 

 
.col-xs-offset-9 { 
 
    margin-left: 75% 
 
} 
 

 
.col-xs-offset-10 { 
 
    margin-left: 83.333% 
 
} 
 

 
.col-xs-offset-11 { 
 
    margin-left: 91.667% 
 
} 
 

 
.start-xs { 
 
    -webkit-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    text-align: start 
 
} 
 

 
.center-xs { 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    text-align: center 
 
} 
 

 
.end-xs { 
 
    -webkit-box-pack: end; 
 
    -webkit-justify-content: flex-end; 
 
    -ms-flex-pack: end; 
 
    justify-content: flex-end; 
 
    text-align: end 
 
} 
 

 
.top-xs { 
 
    -webkit-box-align: start; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start 
 
} 
 

 
.middle-xs { 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center 
 
} 
 

 
.bottom-xs { 
 
    -webkit-box-align: end; 
 
    -webkit-align-items: flex-end; 
 
    -ms-flex-align: end; 
 
    align-items: flex-end 
 
} 
 

 
.around-xs { 
 
    -webkit-justify-content: space-around; 
 
    -ms-flex-pack: distribute; 
 
    justify-content: space-around 
 
} 
 

 
.between-xs { 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between 
 
} 
 

 
.first-xs { 
 
    -webkit-box-ordinal-group: 0; 
 
    -webkit-order: -1; 
 
    -ms-flex-order: -1; 
 
    order: -1 
 
} 
 

 
.last-xs { 
 
    -webkit-box-ordinal-group: 2; 
 
    -webkit-order: 1; 
 
    -ms-flex-order: 1; 
 
    order: 1 
 
} 
 

 
@media only screen and (min-width:48em) { 
 
    .container { 
 
    width: 49rem 
 
    } 
 
    .col-sm, 
 
    .col-sm-1, 
 
    .col-sm-10, 
 
    .col-sm-11, 
 
    .col-sm-12, 
 
    .col-sm-2, 
 
    .col-sm-3, 
 
    .col-sm-4, 
 
    .col-sm-5, 
 
    .col-sm-6, 
 
    .col-sm-7, 
 
    .col-sm-8, 
 
    .col-sm-9, 
 
    .col-sm-offset-1, 
 
    .col-sm-offset-10, 
 
    .col-sm-offset-11, 
 
    .col-sm-offset-12, 
 
    .col-sm-offset-2, 
 
    .col-sm-offset-3, 
 
    .col-sm-offset-4, 
 
    .col-sm-offset-5, 
 
    .col-sm-offset-6, 
 
    .col-sm-offset-7, 
 
    .col-sm-offset-8, 
 
    .col-sm-offset-9 { 
 
    box-sizing: border-box; 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 0 auto; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
    padding-right: .5rem; 
 
    padding-left: .5rem 
 
    } 
 
    .col-sm { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex-grow: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    -webkit-flex-basis: 0; 
 
    -ms-flex-preferred-size: 0; 
 
    flex-basis: 0; 
 
    max-width: 100% 
 
    } 
 
    .col-sm-1 { 
 
    -webkit-flex-basis: 8.333%; 
 
    -ms-flex-preferred-size: 8.333%; 
 
    flex-basis: 8.333%; 
 
    max-width: 8.333% 
 
    } 
 
    .col-sm-2 { 
 
    -webkit-flex-basis: 16.667%; 
 
    -ms-flex-preferred-size: 16.667%; 
 
    flex-basis: 16.667%; 
 
    max-width: 16.667% 
 
    } 
 
    .col-sm-3 { 
 
    -webkit-flex-basis: 25%; 
 
    -ms-flex-preferred-size: 25%; 
 
    flex-basis: 25%; 
 
    max-width: 25% 
 
    } 
 
    .col-sm-4 { 
 
    -webkit-flex-basis: 33.333%; 
 
    -ms-flex-preferred-size: 33.333%; 
 
    flex-basis: 33.333%; 
 
    max-width: 33.333% 
 
    } 
 
    .col-sm-5 { 
 
    -webkit-flex-basis: 41.667%; 
 
    -ms-flex-preferred-size: 41.667%; 
 
    flex-basis: 41.667%; 
 
    max-width: 41.667% 
 
    } 
 
    .col-sm-6 { 
 
    -webkit-flex-basis: 50%; 
 
    -ms-flex-preferred-size: 50%; 
 
    flex-basis: 50%; 
 
    max-width: 50% 
 
    } 
 
    .col-sm-7 { 
 
    -webkit-flex-basis: 58.333%; 
 
    -ms-flex-preferred-size: 58.333%; 
 
    flex-basis: 58.333%; 
 
    max-width: 58.333% 
 
    } 
 
    .col-sm-8 { 
 
    -webkit-flex-basis: 66.667%; 
 
    -ms-flex-preferred-size: 66.667%; 
 
    flex-basis: 66.667%; 
 
    max-width: 66.667% 
 
    } 
 
    .col-sm-9 { 
 
    -webkit-flex-basis: 75%; 
 
    -ms-flex-preferred-size: 75%; 
 
    flex-basis: 75%; 
 
    max-width: 75% 
 
    } 
 
    .col-sm-10 { 
 
    -webkit-flex-basis: 83.333%; 
 
    -ms-flex-preferred-size: 83.333%; 
 
    flex-basis: 83.333%; 
 
    max-width: 83.333% 
 
    } 
 
    .col-sm-11 { 
 
    -webkit-flex-basis: 91.667%; 
 
    -ms-flex-preferred-size: 91.667%; 
 
    flex-basis: 91.667%; 
 
    max-width: 91.667% 
 
    } 
 
    .col-sm-12 { 
 
    -webkit-flex-basis: 100%; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
    max-width: 100% 
 
    } 
 
    .col-sm-offset-1 { 
 
    margin-left: 8.333% 
 
    } 
 
    .col-sm-offset-2 { 
 
    margin-left: 16.667% 
 
    } 
 
    .col-sm-offset-3 { 
 
    margin-left: 25% 
 
    } 
 
    .col-sm-offset-4 { 
 
    margin-left: 33.333% 
 
    } 
 
    .col-sm-offset-5 { 
 
    margin-left: 41.667% 
 
    } 
 
    .col-sm-offset-6 { 
 
    margin-left: 50% 
 
    } 
 
    .col-sm-offset-7 { 
 
    margin-left: 58.333% 
 
    } 
 
    .col-sm-offset-8 { 
 
    margin-left: 66.667% 
 
    } 
 
    .col-sm-offset-9 { 
 
    margin-left: 75% 
 
    } 
 
    .col-sm-offset-10 { 
 
    margin-left: 83.333% 
 
    } 
 
    .col-sm-offset-11 { 
 
    margin-left: 91.667% 
 
    } 
 
    .start-sm { 
 
    -webkit-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    text-align: start 
 
    } 
 
    .center-sm { 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    text-align: center 
 
    } 
 
    .end-sm { 
 
    -webkit-box-pack: end; 
 
    -webkit-justify-content: flex-end; 
 
    -ms-flex-pack: end; 
 
    justify-content: flex-end; 
 
    text-align: end 
 
    } 
 
    .top-sm { 
 
    -webkit-box-align: start; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start 
 
    } 
 
    .middle-sm { 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center 
 
    } 
 
    .bottom-sm { 
 
    -webkit-box-align: end; 
 
    -webkit-align-items: flex-end; 
 
    -ms-flex-align: end; 
 
    align-items: flex-end 
 
    } 
 
    .around-sm { 
 
    -webkit-justify-content: space-around; 
 
    -ms-flex-pack: distribute; 
 
    justify-content: space-around 
 
    } 
 
    .between-sm { 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between 
 
    } 
 
    .first-sm { 
 
    -webkit-box-ordinal-group: 0; 
 
    -webkit-order: -1; 
 
    -ms-flex-order: -1; 
 
    order: -1 
 
    } 
 
    .last-sm { 
 
    -webkit-box-ordinal-group: 2; 
 
    -webkit-order: 1; 
 
    -ms-flex-order: 1; 
 
    order: 1 
 
    } 
 
} 
 

 
@media only screen and (min-width:64em) { 
 
    .container { 
 
    width: 65rem 
 
    } 
 
    .col-md, 
 
    .col-md-1, 
 
    .col-md-10, 
 
    .col-md-11, 
 
    .col-md-12, 
 
    .col-md-2, 
 
    .col-md-3, 
 
    .col-md-4, 
 
    .col-md-5, 
 
    .col-md-6, 
 
    .col-md-7, 
 
    .col-md-8, 
 
    .col-md-9, 
 
    .col-md-offset-1, 
 
    .col-md-offset-10, 
 
    .col-md-offset-11, 
 
    .col-md-offset-12, 
 
    .col-md-offset-2, 
 
    .col-md-offset-3, 
 
    .col-md-offset-4, 
 
    .col-md-offset-5, 
 
    .col-md-offset-6, 
 
    .col-md-offset-7, 
 
    .col-md-offset-8, 
 
    .col-md-offset-9 { 
 
    box-sizing: border-box; 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 0 auto; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
    padding-right: .5rem; 
 
    padding-left: .5rem 
 
    } 
 
    .col-md { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex-grow: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    -webkit-flex-basis: 0; 
 
    -ms-flex-preferred-size: 0; 
 
    flex-basis: 0; 
 
    max-width: 100% 
 
    } 
 
    .col-md-1 { 
 
    -webkit-flex-basis: 8.333%; 
 
    -ms-flex-preferred-size: 8.333%; 
 
    flex-basis: 8.333%; 
 
    max-width: 8.333% 
 
    } 
 
    .col-md-2 { 
 
    -webkit-flex-basis: 16.667%; 
 
    -ms-flex-preferred-size: 16.667%; 
 
    flex-basis: 16.667%; 
 
    max-width: 16.667% 
 
    } 
 
    .col-md-3 { 
 
    -webkit-flex-basis: 25%; 
 
    -ms-flex-preferred-size: 25%; 
 
    flex-basis: 25%; 
 
    max-width: 25% 
 
    } 
 
    .col-md-4 { 
 
    -webkit-flex-basis: 33.333%; 
 
    -ms-flex-preferred-size: 33.333%; 
 
    flex-basis: 33.333%; 
 
    max-width: 33.333% 
 
    } 
 
    .col-md-5 { 
 
    -webkit-flex-basis: 41.667%; 
 
    -ms-flex-preferred-size: 41.667%; 
 
    flex-basis: 41.667%; 
 
    max-width: 41.667% 
 
    } 
 
    .col-md-6 { 
 
    -webkit-flex-basis: 50%; 
 
    -ms-flex-preferred-size: 50%; 
 
    flex-basis: 50%; 
 
    max-width: 50% 
 
    } 
 
    .col-md-7 { 
 
    -webkit-flex-basis: 58.333%; 
 
    -ms-flex-preferred-size: 58.333%; 
 
    flex-basis: 58.333%; 
 
    max-width: 58.333% 
 
    } 
 
    .col-md-8 { 
 
    -webkit-flex-basis: 66.667%; 
 
    -ms-flex-preferred-size: 66.667%; 
 
    flex-basis: 66.667%; 
 
    max-width: 66.667% 
 
    } 
 
    .col-md-9 { 
 
    -webkit-flex-basis: 75%; 
 
    -ms-flex-preferred-size: 75%; 
 
    flex-basis: 75%; 
 
    max-width: 75% 
 
    } 
 
    .col-md-10 { 
 
    -webkit-flex-basis: 83.333%; 
 
    -ms-flex-preferred-size: 83.333%; 
 
    flex-basis: 83.333%; 
 
    max-width: 83.333% 
 
    } 
 
    .col-md-11 { 
 
    -webkit-flex-basis: 91.667%; 
 
    -ms-flex-preferred-size: 91.667%; 
 
    flex-basis: 91.667%; 
 
    max-width: 91.667% 
 
    } 
 
    .col-md-12 { 
 
    -webkit-flex-basis: 100%; 
 
    -ms-flex-preferred-size: 100%; 
 
    flex-basis: 100%; 
 
    max-width: 100% 
 
    } 
 
    .col-md-offset-1 { 
 
    margin-left: 8.333% 
 
    } 
 
    .col-md-offset-2 { 
 
    margin-left: 16.667% 
 
    } 
 
    .col-md-offset-3 { 
 
    margin-left: 25% 
 
    } 
 
    .col-md-offset-4 { 
 
    margin-left: 33.333% 
 
    } 
 
    .col-md-offset-5 { 
 
    margin-left: 41.667% 
 
    } 
 
    .col-md-offset-6 { 
 
    margin-left: 50% 
 
    } 
 
    .col-md-offset-7 { 
 
    margin-left: 58.333% 
 
    } 
 
    .col-md-offset-8 { 
 
    margin-left: 66.667% 
 
    } 
 
    .col-md-offset-9 { 
 
    margin-left: 75% 
 
    } 
 
    .col-md-offset-10 { 
 
    margin-left: 83.333% 
 
    } 
 
    .col-md-offset-11 { 
 
    margin-left: 91.667% 
 
    } 
 
    .start-md { 
 
    -webkit-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    text-align: start 
 
    } 
 
    .center-md { 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    text-align: center 
 
    } 
 
    .end-md { 
 
    -webkit-box-pack: end; 
 
    -webkit-justify-content: flex-end; 
 
    -ms-flex-pack: end; 
 
    justify-content: flex-end; 
 
    text-align: end 
 
    } 
 
    .top-md { 
 
    -webkit-box-align: start; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start 
 
    } 
 
    .middle-md { 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center 
 
    } 
 
    .bottom-md { 
 
    -webkit-box-align: end; 
 
    -webkit-align-items: flex-end; 
 
    -ms-flex-align: end; 
 
    align-items: flex-end 
 
    } 
 
    .around-md { 
 
    -webkit-justify-content: space-around; 
 
    -ms-flex-pack: distribute; 
 
    justify-content: space-around 
 
    } 
 
    .between-md { 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between 
 
    } 
 
    .first-md { 
 
    -webkit-box-ordinal-group: 0; 
 
    -webkit-order: -1; 
 
    -ms-flex-order: -1; 
 
    order: -1 
 
    } 
 
    .last-md { 
 
    -webkit-box-ordinal-group: 2; 
 
    -webkit-order: 1; 
 
    -ms-flex-order: 1; 
 
    order: 1 
 
    } 
 
} 
 

 

 

 
.col-sm-6 {background:turquoise;}
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="motability-bg"> 
 
     <img src="/img/new-car-template/motab-bg.jpg" alt="motability seat"> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <div class="motability-content-bg"></div> 
 
     <div class="motability-content"> 
 
     <h1>Motability</h1> 
 
     <p>Hello</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>