0

One of our designers has created a layout where the footer content order changes from desktop to mobile. I'm using bootstrap and would like to do it as simply as possible. I believe the following is the correct markup but it doesn't seem to work for full width columns?

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-sm-push-12">
            <div class="row">
                <div class="col-md-12">
                    <p>Ooo content</p>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-sm-pull-12">
            <div class="row">
                <div class="col-md-12">
                    <p>Ooo more content</p>
                </div>
            </div>
        </div>
    </div>
</div>

Example: https://jsfiddle.net/rwydcepc/

The aim of the above is to switch the top column with the bottom column when the sm is applied. This doesn't seem to happen though and everything screws up?

Is there another way to do this using bootstrap or with some simple additional css, ideally I'd like to avoid duplicate content and showing / hiding or relying on Javascript.

There is a similar question here but it doesn't answer the question: Change the order of col-*-12 columns in Bootstrap 3 by using push/pull

Community
  • 1
  • 1
Dan
  • 11,914
  • 14
  • 49
  • 112
  • 2
    Create some css like .small-hidden and .small-show add two divs add the top that you want to toggle and two at the bottom. now the top ones and bottom ones will switch. you can use @media screen and (max-width: 720px) – Sven van den Boogaart Jul 06 '15 at 11:06

1 Answers1

3

There is already a solution using Bootstrap reordering but not for 100% width columns, the below solution uses Flexbox method.

@media (max-width: 768px) {
  .reorder .row {
    display: flex;
    display: -ms-flex;
    flex-direction: column;
  }
  .reorder .row .item1 {
    order: 2;
  }
  .reorder .row .item2 {
    order: 1;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container reorder">
  <div class="row">
    <div class="col-sm-12 item1">

      <p>Ooo content</p>

    </div>
    <div class="col-sm-12 item2">

      <p>Ooo more content</p>

    </div>
  </div>
</div>
m4n0
  • 29,823
  • 27
  • 76
  • 89