CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
schutte
schutte

Reputation: 2166

How to change position in bootstrap?

I'm trying to create a responsive webpage by constructing its bootstrap grid, but after burning hours of searching and trying, I've always end up to nowhere.

Here's my code below:

<div class="row">
    <div class="col-md-2" align="center">
        <div class="d-flex flex-column">
            <h1 class="border">A</h1>
            <h1 class="border">B</h1>
            <h1 class="border">C</h1>
        </div>
    </div>
    <div class="col-md-7 col-sm-9 border" align="center">
        <h1>D</h1>
    </div>
    <div class="col-md-3 col-sm-3 border" align="center">
        <h1>E</h1>
    </div>
</div>

Already done the COL-MD, like below:

enter image description here

What I'm struggling here is to make it like below when it will COL-SM

enter image description here

I find it really difficult, I have tried offsets, etc. but I can't get the perfect one. Someone can help me how to achieve this?

Upvotes: 0

Views: 875

Answers (1)

ztefanie
ztefanie

Reputation: 850

You should add col-sm-12 to define the ABC to be full width when the display is small and col-md-12 to define ABC each be "full width" in the container, when the display is medium, so it should look like this:

<div class="row">
<div class="col-md-2 col-sm-12" align="center">
    <div class="row">
        <h1 class="border col-md-12 col-sm-4">A</h1>
        <h1 class="border col-md-12 col-sm-4">B</h1>
        <h1 class="border col-md-12 col-sm-4">C</h1>
    </div>
</div>
<div class="col-md-7 col-sm-9 border" align="center">
    <h1>D</h1>
</div>
<div class="col-md-3 col-sm-3 border" align="center">
    <h1>E</h1>
</div>

JS-Fiddle: http://jsfiddle.net/79onzx0r/

Output is:

enter image description here

enter image description here

Upvotes: 1

Related Questions