Using flexbox to change ordering in Bootstrap 4 - css

Question

I'm currently building a site that has a team section that should look like the following:
Here is my current scss file:
.team-member-card {
&__text-content {
background-color: red;
padding: 16px;
overflow-y: scroll;
}
&__name {
font-family: CircularStd;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: $white;
}
&__role {
font-family: CircularStd;
font-size: 18px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.44;
letter-spacing: normal;
color: $white;
}
&__biography {
font-family: Balto;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
color: $white;
}
&__image-container {
position: relative;
}
&__image {
height: auto;
max-width: 100%;
object-fit: contain;
background-color: #ffffff;
}
&__social-link {
position: absolute;
width: 48px;
height: 48px;
object-fit: contain;
}
}
I have broken the component down into the obvious sections I can see but as you can see, every n+1 team member has their image on the other side, is there a way to inverse the column order?

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
please check documentation. To understand code check below
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.box {
display: flex;
flex-direction: row;
}
.box :nth-child(1) { order: 2; }
.box :nth-child(2) { order: 3; }
.box :nth-child(3) { order: 1; }
.box :nth-child(4) { order: 3; }
.box :nth-child(5) { order: 1; }

Answer 2

Please try to look for the css nth element selector. It has odd and even selector.
:nth-child(odd) {
float: right;
}
//or with flex-direction
flex-direction: row-reverse;
Please have a look here