Responsive 4 Column Layout for .NET Site

[ma1hman]

I am renovating an old .NET Web Forms site to a response bootstrap HTML5 site. It is an e-Commerce site for copier parts and supplies. One of the pages I am working with contains a list of models (4 columns) that are generated dynamically from a search. In the original configuration the data merge was handled with a DataList control with RepeatColumns = 4 and RepeatDirection="Vertical". Here, the data reads top down and left to right. The control would automatically calculate for an even distribution of data on each column.

Now that we will be moving to a responsive layout, the DataList will no longer do the job. What i need is to achieve the same effect with a [col-lg-3][col-lg-3][col-lg-3][col-lg-3] layout where each column is populated from a database. The columns should also stack as the view port becomes smaller.

The data will be rendered server-side. Below is the desired layout (for mobile i would like the columns to stack):

<div class="row">
<div class="col-lg-3">
Model 1
Model 2
Model 3
</div>
<div class="col-lg-3">
Model 4
Model 5
Model 6
</div>
<div class="col-lg-3">
Model 7
Model 8
Model 9
</div>
<div class="col-lg-3">
Model 10
Model 11
</div>
</div>

The main question is when binding the data, how can i set it up so it distributes evenly in the columns and have the columns stack for smaller devices.

Desktop:
[A][B][C][D]

Mobile (Laptop):
[A][C]
[B][D]

Mobile (Smartphone):
[A]
[B]
[C]
[D]

Do i need a separate binding for each column? Or can this be done simply with a Repeater control and the right push / pull classes on the <div> elements?

Thanks in advance,
Jason

[Disconnected]

Hello!

Since your working with the grid everything should and will stack it's self accordingly to how you code it, laptop and desktop screens are relatively the same size so you wont get that type of layout
It it will only shrink the layout to suit things like tablets, iphones, ipads and smartphones everything should really be done for you

<div class="row-fluid">
	<!-- like to have 12 rows already set up-->
	<div class="col-md-12">
		<!--I prefer using md rather than xs,lg and sm -->	
		<div class="col-md-3">
			<!-- your content for area "A"-->
		</div>
		<div class="col-md-3">
			<!-- your content for area "B"-->
		</div>
		<div class="col-md-3">
			<!-- your content for area "C"-->
		</div>
		<div class="col-md-3">
			<!-- your content for area "D"-->
		</div>
	</div>
</div>

and with in each of those cols you could put this to fill in the gaps , it automatically will space and what not, they will display 4 per horizontal row

	<div class="row">
  <div class="col-sm-3">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>