how to change div orientation on small screen in bootstrap

Question

i am working on bootstrap and i am stuck in a div orientation on small screen. on medium screen i am using 6, 6 columns which should stack on top of each other on small screeni want something list this

on small screen the columns are going like column 3 on top of column 4, but i want column 4 on top of column 3. how can i do that? i know it has to do something with push pull, but i am unable to figure it out

EDIT: i am currently using this code, which needs to be modify like the layout in the picture i have shared above

<div class="row">
        <div class="col-md-6">
            column 3
        </div>

        <div class="col-md-6">
            column 4
        </div>
    </div>

is this 1,2 and 4,3 on small screen ? – Shadow Walker Mar 09 '18 at 11:21 — Shadow Walker, Mar 09 '18 at 11:21
yes i want it like 1,2 and 4,3 instead of 3,4 – Asad Ullah Mar 09 '18 at 11:22 — Asad Ullah, Mar 09 '18 at 11:22
Please post some code that we can inspect. – Johannes Piontkowitz Mar 09 '18 at 11:22 — Johannes Piontkowitz, Mar 09 '18 at 11:22
i have edited the question. kindly have a look – Asad Ullah Mar 09 '18 at 11:29 — Asad Ullah, Mar 09 '18 at 11:29

Ylama · Answer 1 · 2018-03-09T11:34:59.313

using flex , just add it to your @media css query.

.container>.row{
    display: flex;
    flex-direction: column-reverse;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">





<div class="container">
<h1>Flex:</h1>
<div class="row">
        <div class="col-md-6">
            column 3
        </div>

        <div class="col-md-6">
            column 4
        </div>
</div>
</div>

<h1>normal</h1>
<div class="row">
        <div class="col-md-6">
            column 3
        </div>

        <div class="col-md-6">
            column 4
        </div>
</div>

its also tagged `css` @Klooven, this is a solution, if you have a better one please help the guy. — Ylama, Mar 09 '18 at 17:26
It's a completely valid solution for BS3, but this can be made using only classes included in BS4. It's of course the asker that selects the solution that works best for him/her :) — Klooven, Mar 09 '18 at 21:15

score -1 · Answer 2 · answered Mar 09 '18 at 11:24

-1

Use float right property on 3 and 4 and put 4 before 3. it will automaticallty show 3,4 on big screen and 4,3 on small screen

answered Mar 09 '18 at 11:24

Shadow Walker

206
1
2
13

are you sure its the right way? I mean isn't there a solution in bootstrap? – Asad Ullah Mar 09 '18 at 11:26
Use bootstrap pull-right class. – Shadow Walker Mar 09 '18 at 11:43
@ShadowWalker Nope, this is not the right way for Bootstrap 4. Please check the duplicate questions for the right way. – Klooven Mar 09 '18 at 15:24

how to change div orientation on small screen in bootstrap

2 Answers2