How to achieve this Bootstrap layout?

Question

I have a Bootstrap layout that I would like to create but I can't figure out how I would accomplish it. Basically, on desktop sizes the layout will be a 4-column, a 6-column and a 2-column next to each other in that order, and then mobile I would like for the 4 and the 2-column to remain next to each other and for the 6-column to drop below.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-sm-4">
      A
    </div>
    <div class="col-sm-6">
      B
    </div>
    <div class="col-xs-4 col-sm-2">
      C
    </div>
    <div class="clearfix"></div>
  </div>
</div>

So on mobile I want "A" and "C" to be inline and "B" to be a full 12-columns below "A" and "C"

score 2 · Accepted Answer · answered May 17 '16 at 15:21

2

You can do it with regular bootstrap push and pull and don't need to rely on absolute positioning. See bootstrap docs here: http://getbootstrap.com/css/#grid-column-ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

answered May 17 '16 at 15:21

Rachel S

3,780
3
24
37

Thank you for the suggestion and thank you for the example @azeós, this worked perfectly. – user13286 May 17 '16 at 16:52

score 0 · Answer 2 · answered May 17 '16 at 15:13

You could try something like this: - as long as this container is relatively poisitioned, it should be fine.

https://jsfiddle.net/znwsk6fw/

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-sm-4">
      A
    </div>
    <div class="col-sm-6 col-md-6 col-xs-12 ">
      B
    </div>
    <div class="col-xs-4 col-sm-2 col-md-2 column_c">
      C
    </div>
    <div class="clearfix"></div>
  </div>
</div>

@media screen and (max-width:768px) {
  .column_c {
    position:absolute;
    right:0;
  }
}

How to achieve this Bootstrap layout?

2 Answers2