how to? bootstrap - 2 Columns with 3 rows with equal height? -
i have 2 columns 3 "rows" (or 3 items). want have row 1 in both columns same height, in row 2 , row 3 same.
i know how 3 rows having 2 columns. using 3 rows 2 columns not work on small device, because left columns should first , right column @ end.
i want on desktop like:
a1|b1 a1|right row same height, less content a1 a2|b2 no content|b2 no content|b2 a3|b3
on mobile should be:
a1 a2 a3 b1 b2 b3
if use 3 rows 2 columns work equal height each row on desktop, on mobile have:
a1 b1 a2 b2 a3 b3
your specific required cannot solved constructing 3 row 2 column.
you should try wrap leftone(s) single div , rightone(s) single div. this
<div id="left" class="col-md-8"> a1<br></br> a2<br></br> a3<br></br> </div> <div id="right" class="col-md-8"> b1<br></br> b2<br></br> b3<br></br> </div>
this way in normal desktop version like
a1 b1 a2 b2 a3 b3
in mobile version should wanted
a1 a2 a3 b1 b2 b3
(note: need manage height of each element a1, b1, a2, b2 make 3x2 table 1x2.)
Comments
Post a Comment