zawm, так?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Page</title>
<style>
* {
box-sizing: border-box;
}
.page {
display: flex;
font: 1em/1.2 Arial, sans-serif;
}
.page__column {
background: #ccc;
border: 2px solid #bbb;
margin-right: 0.5em;
}
.page__column:last-child {
margin: 0;
}
.column--center {
background: orange;
}
@media screen and (max-width:760px) {
.page {
flex-direction: column;
}
.column--center {
order: 1;
}
.column--left {
order: 2;
}
.column--right {
order: 3;
}
.page__column {
margin-bottom: 0.5em;
}
}
</style>
</head>
<body>
<div class="page">
<div class="page__column column--left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa numquam aliquam perferendis aperiam adipisci quaerat hic error repellendus quisquam repudiandae voluptatem iusto minima facilis fugiat consectetur voluptas sapiente, porro quis!</p>
<p>Vel quae, similique delectus, libero non expedita nemo beatae vero. Praesentium at repellendus a et ipsam optio ullam quaerat debitis quis fugit vitae, culpa mollitia id cumque cupiditate quod nisi!</p>
<p>Doloremque recusandae eaque architecto illo sed dolore ratione alias dicta ipsa, consectetur eveniet, quasi, aliquam porro molestiae repudiandae perferendis. Asperiores maiores sequi natus obcaecati enim placeat velit quo atque excepturi?</p>
<p>Quam consequatur, quod beatae blanditiis, tenetur aperiam cupiditate vero eaque iure maiores fugiat ducimus. Quaerat rem modi, earum libero quam voluptatibus corrupti ab, adipisci velit impedit sint animi voluptates! Expedita.</p>
<p>Modi accusamus dolores odio inventore laudantium molestias, ipsum maiores animi velit. Asperiores sint libero nulla officiis, ex est voluptatibus minus mollitia laborum? Vero voluptatibus in aperiam architecto quis aspernatur a.</p>
</div>
<div class="page__column column--center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sed optio quod quisquam, sunt labore aspernatur, similique pariatur voluptas nesciunt esse! Recusandae quisquam voluptatum, natus. Reprehenderit adipisci alias nulla deserunt.</p>
<p>Commodi non sapiente earum vitae necessitatibus ex consectetur, labore dolore optio sint eveniet, saepe quos eligendi quidem, corporis debitis quasi neque iste adipisci ut impedit laborum quam sed! Suscipit, earum.</p>
<p>Iste aperiam repellendus, aspernatur, quibusdam animi, similique, ex dolorum officiis necessitatibus quis ab. Sit, harum, id. Delectus architecto dignissimos, ea dolore modi placeat officiis iusto nihil enim aut nostrum, quia?</p>
</div>
<div class="page__column column--right"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus impedit, mollitia perferendis quos unde nobis id praesentium sunt nesciunt est vero, delectus, illum fuga ratione veritatis. Eaque dolor, minima recusandae.</p>
<p>Possimus consectetur unde optio, distinctio deleniti iure laudantium molestiae ad atque velit voluptates ut ratione perspiciatis eos id qui placeat, omnis nemo nam vero magnam doloremque eaque! Maiores, optio, molestiae.</p>
</div>
</div>
</body>
</html>
Песочница
|