Страница списка заказов

<div class="el_orderList_xxxxxx">
	<div class="innerWrapper">
		<div class="row tableHeader">
			<div class="col number"><p>Код заказа</p></div>
			<div class="col qty"><p>Количество</p></div>
			<div class="col sum"><p>Сумма</p></div>
			<div class="col status"><p>Статус заказа</p></div>
			<div class="col more"><p>Подробнее</p></div>
		</div>
 
		<div class="orderList row">
			<div class="col tableRow">
				<div class="row">
					<div class="col number"><span class="title">Код заказа:</span> <span class="value">88556622</span></div>
					<div class="col qty"><span class="title">Количество:</span> <span class="value">3</span></div>
					<div class="col sum"><span class="title">Сумма:</span> <span class="value">2697 ₴</span></div>
					<div class="col status"><span class="title">Статус заказа</span> <span class="value" style="color: #4FAD25; font-weight: bold;">Новый заказ</span></div> <!-- Значение style берется из информации о заказе -->
					<div class="col more"><a href="/order/1/">Подробнее</a></div>
				</div>
			</div>
			...
			<div class="col tableRow">...</div>
		</div>
	</div>
</div>

.el_orderList_xxxxxx
{
}
.el_orderList_xxxxxx .innerWrapper
{
	padding-left: 15px;
	padding-right: 15px;
}
 
/***/
 
.el_orderList_xxxxxx .col.qty
{
	-ms-flex: 0 0 130px;
	flex: 0 0 130px;
	max-width: 130px;
}
.el_orderList_xxxxxx .col.sum
{
	-ms-flex: 0 0 200px;
	flex: 0 0 200px;
	max-width: 200px;
}
.el_orderList_xxxxxx .col.status
{
	-ms-flex: 0 0 200px;
	flex: 0 0 200px;
	max-width: 200px;
}
.el_orderList_xxxxxx .col.more
{
	-ms-flex: 0 0 130px;
	flex: 0 0 130px;
	max-width: 130px;
}
 
/***/
 
.el_orderList_xxxxxx .tableHeader
{
	background-color: #E1EEF4;
}
.el_orderList_xxxxxx .tableHeader .col
{
	padding-top: 15px;
	padding-bottom: 15px;
}
.el_orderList_xxxxxx .tableHeader .col p
{
	font-size: 1.4rem;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
}
.el_orderList_xxxxxx .tableHeader .number p
{
	text-align: left;
}
 
/***/
 
.el_orderList_xxxxxx .tableRow
{
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
.el_orderList_xxxxxx .tableRow:nth-child(even)
{
	background-color: #fafafa;
}
.el_orderList_xxxxxx .tableRow .col
{
	padding-top: 15px;
	padding-bottom: 15px;
 
	font-size: 1.4rem;
	text-align: center;
}
.el_orderList_xxxxxx .tableRow .col.number
{
	font-size: 1.4rem;
	text-align: left;
}
.el_orderList_xxxxxx .tableRow .col .title
{
	display: none;
}
 
@media (max-width: 860px)
{
	.el_orderList_xxxxxx .col.qty
	{
		-ms-flex: 0 0 130px;
		flex: 0 0 130px;
		max-width: 130px;
	}
	.el_orderList_xxxxxx .col.sum
	{
		-ms-flex: 0 0 150px;
		flex: 0 0 150px;
		max-width: 150px;
	}
	.el_orderList_xxxxxx .col.status
	{
		-ms-flex: 0 0 150px;
		flex: 0 0 150px;
		max-width: 150px;
	}
	.el_orderList_xxxxxx .col.more
	{
		-ms-flex: 0 0 130px;
		flex: 0 0 130px;
		max-width: 130px;
	}
}
@media (max-width: 767px)
{
	.el_orderList_xxxxxx .tableHeader
	{
		display: none;
	}
	.el_orderList_xxxxxx .innerWrapper
	{
		padding-left: 0px;
		padding-right: 0px;
	}
	.el_orderList_xxxxxx .tableRow
	{
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 30px;
		background-color: transparent !important;
	}
	.el_orderList_xxxxxx .tableRow .row
	{
		margin-left: 0px;
		margin-right: 0px;
		border: 1px solid #2091C9;
		border-radius: 3px;
	}
	.el_orderList_xxxxxx .tableRow .col.more
	{
		justify-content: center;
	}
	.el_orderList_xxxxxx .tableRow .col
	{
		display: -ms-flex;
		display: flex;
		justify-content: space-between;
 
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.el_orderList_xxxxxx .tableRow .col:nth-child(even)
	{
		background-color: #fafafa;
	}
	.el_orderList_xxxxxx .tableRow .col .title
	{
		display: inline-block;
	}
}
 
@media (max-width: 600px)
{
	.el_orderList_xxxxxx .tableRow
	{
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}