0

I have a 2 column layout in a bootsrap layout as follows:

[left][right]

Its all ok, but when Im on a smaller screen (mobile device) the divs are like this:

[left]
[right]

It is required for the divs to have an order in responsive like this:

[right]
[left]

Because right contains a video which should show at first sight.

Any idea on how to do this, ideally with no additional css or javascript than what bootsrap provides?

Thanks for the help!

Here is the code I have in a nutshell:

<div class="container">
<div class="row">
    <div class="col-md-6">
        text
    </div>
    <div class="col-md-6 video-box">
        video
    </div>
</div>
</div>
RicardoE
  • 1,665
  • 6
  • 24
  • 42
  • 1
    Post your current bootstrap code. – m4n0 Jun 03 '15 at 15:14
  • There's a good answer to this here: http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout – Toby Jun 03 '15 at 15:17

2 Answers2

1

Bootstrap is a "mobile first" framework, so place the divs in the order you want them to be on mobile, then use col-md-push-* on your right div, and col-md-pull-* on your left to arrange them on larger screen sizes.

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-pull-6 video-box">
            video
        </div>
        <div class="col-md-6 col-md-push-6">
            text
        </div>

    </div>
</div>
Mark Polivchuk
  • 95
  • 1
  • 9
0

You can use the Bootstrap classes of col-xs-push-# and col-xs-pull-#. Where # is the specified number of columns. In your case, you'll want to set the videoplayer large enough to force the other element to the next line.

This video shows how to do it. https://www.youtube.com/watch?v=6UgQYdhy8uU&list=PL41lfR-6DnOovY0t3nBg8Zb6aqm_H70mR&index=7

Jared Potter
  • 21
  • 4