Есть такой код(образно):
* {
box-sizing: border-box;
}
.wrapper {
width: 600px;
margin: 0 auto;
background-color: green;
}
.clearfix::after {
clear: both;
display: table;
content: "";
}
.clearfix::before {
display: table;
content: "";
}
.title {
width: 200px;
background-color: red;
height: 50px;
float: right;
}
.text {
width: 200px;
height: 50px;
background-color: yellow;
float: left;
}
ol {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-flex;
width: 200px;
height: 50px;
text-align: center;
font-size: 30px;
background-color: blue;
border: 1px solid red;
}
<div class="wrapper clearfix">
<div class="title">
fet fet fet fet
</div>
<ol>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
</ol>
<div class="text">
fet fet fet
</div>
</div>
Требуется что бы элементы списка обтекали красный блок(слева и снизу) и желтый блок(справа и сверху). Подскажите, пожалуйста, как можно добиться желаемого эффекта???