Gonzalo Gonzalo - 24 days ago 10
CSS Question

Bootstrap two columns on the right

I have the following problem, I am showing one element after the other for XS and SM, but for MD I want to show one image on the left and two elements on the right column, I couldn't find a way to fit the second column under the right one. Here is what I want to do

Mobile (this is working)
----------------------
*Title*
*Description*
*Image*
*Icons*
----------------------

Now for >= MD (Not Working)
----------------------
*Image* | *Title*
| *Description*
| *Icons*
----------------------


I couldn't find a way to fit description and Icons under title. Here is my code:

<div class="row">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-6 col-md-push-6">
<h2>Title</h2>
<p>Data</p>
</div>
<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-pull-6 col-md-6 col-lg-offset-1 main-tour">
<img class="img-responsive center-block" src="https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg"/>
</div>
<div class="main-tour">
<div class="col-xs-12 col-md-5 col-lg-offset-1 items m-t-3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</div>


DEMO

Any ideas how this could be implemented?

Answer

here you have a jsfiddle. Use media queries for screen sizes and apply your css.

@media (min-width:420px) and (max-width:1040px){
  .main-tour{
    float:left;
  }

  .row .first, .row .main-tour{
    display:inline-block;
  }
  .main-tour.description{
    display:block;
    float:none;
  }
}
Comments