Hier ein Beispiel mit media-queries. Ich hatte so etwas ähnliches mal mit
PocketGrid gemacht (daher stammt block und block-group).
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
test
</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {font: 100%/1.6 sans-serif; padding: 2em 0; color: #000;}
/* Border-box-sizing */
.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix */
.block-group {
*zoom: 1;
}
.block-group:before, .block-group:after {
display: table;
content: "";
line-height: 0;
}
.block-group:after {
clear: both;
}
.block-group {
/* ul/li compatibility */
list-style-type: none;
padding: 0;
margin: 0;
}
/* Nested grid */
.block-group > .block-group {
clear: none;
float: left;
margin: 0 !important;
}
/* Default block */
.block {
float: left;
width: 100%;
}
.container {
max-width: 60em;
margin: 0 auto;
background: #FFFF80;
}
.b1, .b2, .b3 {
margin-left: 1.5%;
margin-top: 1em;
padding: 1em;
background: #ccc;
width: 31.333333333333332%;
}
.b4 {
margin: 1em;
margin-left: 55%;
padding: 1em;
background: #0FF;
width: 10em;
text-align: center;
}
/* =Tablet (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 48em) and (max-width: 59.9375em) {
.container {width: 45.5em;}
.b1 {width: 40%;}
.b2, .b3 {width: 48%;}
.b2 {clear: left;}
.b4 {margin-left: 40%;}
}
/* =Mobile (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 47.9375em) {
body {padding: 0;}
.container { width: 19.375em;}
.b1, .b2, .b3 {width: 97%;}
.b4 {margin-left: 33%;}
}
/* =Mobile (Portrait 320px)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 29.9375em) {
.b4 {margin-left: 25%;}
}
/* =Mobile (Landscape)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 30em) and (max-width: 47.9375em) {
.container { width: 29.375em; }
}
</style>
</head>
<body>
<div class="container block-group">
<div class="b1 block">
<b>Block 1</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, earum, porro, nesciunt, culpa numquam magni unde officia dolores quo quibusdam ipsam ipsum animi reprehenderit totam rem sint placeat optio aperiam!
</div>
<div class="b2 block">
<b>Block 2</b> Deleniti, repellendus, quidem, quo, libero distinctio praesentium nesciunt odit asperiores esse ipsa voluptas consequatur voluptatem nemo aspernatur tenetur quasi debitis qui provident quibusdam dolore culpa sunt inventore nobis cumque molestias.
</div>
<div class="b3 block">
<b>Block 3</b> Molestiae, reprehenderit, architecto, odit, consequuntur voluptas earum nulla magni nostrum voluptatibus magnam alias iusto dolores similique deserunt maiores ullam eius dolor. Hic, ducimus, in ipsum asperiores quia mollitia accusamus vero.
</div>
<div class="b4 block">
<b>Block 4</b>
</div>
</div>
</body>
</html>