css - Bootstrap - Wrapping Columns Around Larger Column -
i know how standard columns , such in bootstrap. however, have haven't encountered yet , can't seem google answer. maybe don't know call it, hence why can't find it.
i have bunch of boxes, 1 large box on right, , more of smaller boxes under it. think confused because have row, 4 columns 3 wide, larger column needs take multiple rows..
here quick example made in paint:
the smaller boxes kind of thumbnails portfolio, same size. larger box twitter news feed, div twitter provides place newsfeed on site.
i not sure if should create 2 sections (top half , bottom half) or how approach this. thought making top section 2 columns, in 1st have split 2 more (6 , 6). separate section below normal.
however, can add image paragraph , have text wrap around image. wanting same thing, twitter newsfeed , columns..
i can add code once approach if still stuck.
i tried put set of rows , cols inside 1st column, broke spacing between columns mean adding css fix spacing.
hoping has done this, or can see image, how approach this.
try this:
<div class="container-fluid"> <div class="row"> <div class="col-sm-6"> row1-col1 <div class="row"> <div class="col-sm-6"> sub-row1-sub-col1 </div> <div class="col-sm-6"> sub-row1-sub-col2 </div> </div> <div class="row"> <div class="col-sm-6"> sub-row2-sub-col1 </div> <div class="col-sm-6"> sub-row2-sub-col2 </div> </div> <div class="row"> <div class="col-sm-6"> sub-row3-sub-col1 </div> <div class="col-sm-6"> sub-row3-sub-col2 </div> </div> </div> <div class="col-sm-6"> row1-col2 </div> </div> <div class="row"> <div class="col-sm-3"> row2-col1 </div> <div class="col-sm-3"> row2-col2 </div> <div class="col-sm-3"> row2-col3 </div> <div class="col-sm-3"> row2-col4 </div> </div> <div class="row"> <div class="col-sm-3"> row3-col1 </div> <div class="col-sm-3"> row3-col2 </div> <div class="col-sm-3"> row3-col3 </div> <div class="col-sm-3"> row3-col4 </div> </div> </div>
Comments
Post a Comment