Align two icons to one line horizontally - html

Question

I have two icons inside the "col" class. It is sprite icons wrapped with anchor tag. It is stacked one on above. I want it be in one line horizontally. Also I want to reorder it with the bootstrap "order" class . How can I do that? Please help me!
I tried to wrap it with additional row and col.And use flex with flex-direction but nothing helped.
Inside footer
Two icons what I want to align inside my .segment-six class
Icons above each other. I want to see it in horizontal. I want to reorder these stuff to be .segment-four be first then .segment-six then .segment-five in stack
.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">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/150">
</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>

Answer 1

add this code in your css
css
.segment-six a{
float: left;
}
.segment-six a img{
max-width:100%;
height:auto;
}

Answer 2

Use order instead of .segment if you are using bootstrap 4.
For example: .order-5 instead of .segment-five.
The items are horizontally to eachother, have you included bootstrap in your header? <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">
.order-6 {
/* 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 order-4">
<img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+1">
</div>
<div class="col-md-3 col-sm-12 col-xs-12 order-6">
<img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+2">
<img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+3">
</div>
<div class="col-md-6 col-sm-12 col-xs-12 order-5">
<p>©TOO SMART PAY ПЛАТЕЖНАЯ ОРГАНИЗАЦИЯ №02-17-012 OT 09.02.2017 РЕЕСТР НАЦИОНАЛЬНОГО БАНКА РК</p>
</div>
</div>
Further explanation about the order class: https://getbootstrap.com/docs/4.3/layout/grid/#order-classes