Display Different table/grid layout for different device sizes - html

Question

I am creating a website where I need to display some contents {image + text}. I need them to appear to display side by side to fit the display on a PC, and to display tom-bottom order for mobile devices.
In the image the left side shows expected output on a mobile device, the
right side on a PC.
I can put a single TD in each TR by just detecting user agents {if its a mobile or PC} but I need more efficient solution using CSS. DIV is also ok instead of Table layout.

Answer 1

There are a lot of ways to accomplish this, I prefer not to use tables and use divs which you noted is an option.
Using the bootstrap grid system approach is an option that comes to mind.
Here's how I would do it:
Group your blocks by 2 in a parent container and set them to 50% width by default and set them to 100% width on smaller screens using responsive queries.
Here's a simplified markup of what I'm talking about:
<div class="row">
<div class="content-block">1</div>
<div class="content-block">2</div>
</div>
<div class="row">
<div class="content-block">3</div>
<div class="content-block">4</div>
</div>
.content-block {
width:50%;
float:left;
}
#media only screen and (max-width: 767px) {
.content-block {
width:100%;
}
}
and here's a more detailed and a working example:
fiddle

Answer 2

All you should do is to make the default styling in CSS for PC version of website then redo another styling for mobile version as you want but this time inside this template:
#media only screen and (max-width: 500px) {
body {
background-color: blue;
}
}
PS: be sure to specify the correct maximum width for devices you want.

Answer 3

One of best solution is for this is the grid system. You can refer the following links.
Bootstrap is one of best framework for front-end development.
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp