Bootstrap - Using push and pull when resizing window but screen cuts off div

Question

Currently, I have two divs. When the window is fully expanded, I want it to look like this:

----------------------------------------
|   Div-Left |        Div-Right        |
----------------------------------------

When it is on mobile, I want it to look like this:

---------------
|  Div-Right  |
---------------
|   Div-Left  |
---------------

I've been following this example (Bootstrap change div order with pull-right, pull-left on 3 columns and Bootstrap 3: Push/pull columns only on smaller screen sizes), but I can't seem to get it quite right. My code currently looks like this (all of which is within a container):

<div class="row">
    <div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-3 col-md-push-3 col-sm-push-6"></div>
    <div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-8 col-md-pull-6 col-sm-pull-6"></div>
</div>

Note that the class "row" in Bootstrap is:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

It works correctly on mobile/xs up to either small or medium, but something weird happens after. The div starts very far off the left side of the screen and is cut off when it's on desktop with the window fully expanded. Sort of like this:

            ||
        ----||----------------------------------------
 cut off here|   Div-Left |         Div-Right        |
        ----||----------------------------------------
            ||
        the screen

I also tried doing this:

<div class="row">
    <div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-3 col-md-push-3 col-sm-push-6"></div>
    <div class="row">
        <div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-8 col-md-pull-6 col-sm-pull-6"></div>
    </div>
</div>

This didn't work either. I'm trying to code "for mobile first" too! The behavior seems strange and inconsistent, so I'm not quite sure why this is happening (especially only for the larger screens). Any advice would be appreciated! Thanks.

SOLVED: One of my friends was helping me and noticed what I was doing incorrectly. I forgot to switch the numbers around:

<div id="Div-Left" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-lg-push-8 col-md-push-6 col-sm-push-6"></div>
<div id="Div-Right" class="col-lg-8 col-md-6 col-sm-6 col-xs-12 col-lg-pull-3 col-md-pull-3 col-sm-pull-6"></div>

score 0 · Answer 1 · edited Jun 20 '18 at 23:25

I think the issue you are seeing is two fold.

First remember that each class scales up so you don't need to explicitly list what they should do at each size, just what they should be doing at each break point. Being too explicit might be making changes happen at different timings.

Second I have seen in my past where not using all of the available 12cols has made some weirdness happen. At md and lg sized screen you are using 9 and 11 cols (total) respectively. Try using the same proportions of 12 cols. Perhaps try something like:

<div id="Div-Left" class="col-md-4...
<div id="Div-Right" class="col-md-8...

Bootstrap - Using push and pull when resizing window but screen cuts off div

1 Answers1