1

Currently, I have something like this when the window is in its full size:

PARENT
>>> CHILD DIV A (to the left)
>>> CHILD DIV  B (to the right)

When the window is resized to a certain extent, it looks like this:

PARENT
>>> CHILD DIV A (on top of CHILD DIV B)
>>> CHILD DIV  B (below CHILD DIV A)

However, I want it to look like this on resize:

PARENT
>>> CHILD DIV A (below CHILD DIV B)
>>> CHILD DIV  B (on top of CHILD DIV A)

My actual code is in this format:

<PARENT (has a left and right margin only)>
    <CHILD DIV A (has bootstrap classes)/>
    <CHILD DIV B (has bootstrap classes)/>
</PARENT>

BOOTSTRAP CSS USED:

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

How should I accomplish this? I tried messing around with align and float, but nothing seemed to change. Thank you for your advice!

EDIT: I was able to figure it out using Bootstrap's push and pull. This thread helped me a lot: Bootstrap 3: Push/pull columns only on smaller screen sizes Thank you everyone for your help!

  • Can you post your actually html and css. And do you want it to be stacked on small screens or large screens? – ngearing Jun 20 '18 at 00:14
  • @ngearing I edited it to add more details! And I want it to be stacked on small screens, such as smartphones. –  Jun 20 '18 at 18:38
  • You still haven't added your html. Which classes are you using? – ngearing Jun 20 '18 at 23:30

1 Answers1

4

you can do it by making "div b" before "div a" in the code and float them to the right and then use media query to unfloat on certain width.

<PARENT>
    <CHILD DIV B />
    <CHILD DIV A />
</PARENT>

in css:

child-div-a, child-div-b{

  float: right;
}

@media all and (max-width:700px){
    child-div-a, child-div-b {
        float:none;
    }
}

try it and tell me if it worked like you imagined.

Kholy
  • 441
  • 3
  • 10
  • Hi I tried it and it didn't work out as expected. I edited my original post to add more details! Thanks for your advice nonetheless. –  Jun 20 '18 at 18:41