Marco Marco - 2 months ago 5
CSS Question

Bootstrap: Reordering Columns

I'm trying make a grid with Bootstrap 3 that looks like the following.

Goal



SM
sm

MD
md

Approach 1





<div class="container">
<div class="row">
<div class="col-md-9">
<div class="alert alert-info">Content1</div>
</div>
<div class="col-md-3">
<div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div>
</div>
<div class="col-md-9">
<div class="alert alert-info">Content2</div>
</div>
</div>
</div>


My problem here is that I don't know how to pull "Content 2" up in MD like so: a1

Approach 2



<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<div class="alert alert-info">Content1</div>
</div>
<div class="col-md-12">
<div class="alert alert-info">Content2</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div>
</div>
</div>
</div>


The Problem here is, that I can't (or don't know how to) reorder it in SD, so that Sidebar appears between Content 1 and Content 2 or switch Content 2 with Sidebar.

a2

https://jsfiddle.net/q7bc836a/3/

Answer

If you're willing to add more CSS, combining the answer from the question below, and using pull-md-right to the sidebar to pull to the right in md, it shows as you ask

HTML (Based on Approach 1):

  <div class="col-md-3 pull-md-right">
      <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div>
  </div>

CSS (from http://stackoverflow.com/a/21136667/5699206):

@media (min-width: 992px) and (max-width: 1199px) {
    .pull-md-left {
        float: left;
    }
    .pull-md-right {
        float: right;
    }
}

https://jsfiddle.net/nbypupe6/

Comments