How to make responsive grid design using boostrap (placement issue)

Question

I m new to bootstrap, how can make this layout?

my design picture

This is what I have tried, but wrong (it must be such as picture link)

     <div class="col-12 col-lg-4">A</div>   
     <div class="col-12 col-lg-4">
            <div class="row">
                    <div class="col">X</div>  
                    <div class="col">Y</div>  
            </div>
     </div>   
     <div class="col-12 col-lg-4">B</div>

Not possible with BS/Flexbox - https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css - Also see `display:contents`. — Paulie_D, Jul 09 '19 at 14:10

score -2 · Answer 1 · answered Jul 09 '19 at 13:11

-2

Check this if it helps.

.bg{background-color:#f1f1f1; width:100%; height:100%}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="grid">
<div class="row">
<div class="col-md-4">
<div class="bg">A</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="bg">X</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<div class="bg">Y</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg">B</div>
</div>
</div>
</div>

answered Jul 09 '19 at 13:11

Kevin

1,241
7
20

Incorrect order in mobile – metaDesign Jul 09 '19 at 13:13
@Kevin I tried your code but it is wrong in mobile view, result is same as my wrong code, it should be X A Y B please check the image link – Ali CAKIL Jul 09 '19 at 13:19

How to make responsive grid design using boostrap (placement issue)

1 Answers1