How can I align two icons inside the "col" class in a horizontal line rather than stacked on top of each other? Additionally, I want to reorder them using the bootstrap "order" class. Can someone please assist me with this?
I've attempted wrapping them in an additional row and col, as well as using flex with flex-direction, but it hasn't worked.
In the footer
I'm looking to align two icons inside my .segment-six class.
The icons are currently one above the other, but I would like to see them horizontally aligned. Specifically, I want to reorder these elements so that .segment-four comes first, followed by .segment-six, and then .segment-five when stacked.
.segment-six {
/* display: flex;
flex-direction: row; */
width: 120px;
/* margin-left:auto;
margin-right: 20%; */
img {
max-width: 100%;
max-height: 100%;
/* padding-left: 50px; */
}
}<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 segment-four">
<img src="https://via.placeholder.com/50">
</div>
<div class="col-md-3 col-sm-12 col-xs-12 segment-six">
<a href="#"><img src="https://via.placeholder.com/100"></a>
<a href="#"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 segment-five">
<p>©TOO SMART PAY ПЛАТЕЖНАЯ ОРГАНИЗАЦИЯ №02-17-012 OT 09.02.2017 РЕЕСТР НАЦИОНАЛЬНОГО БАНКА РК</p>
</div>
</div>