How to utilize flexbox for rearranging content in Bootstrap 4

Currently in the process of developing a website that includes a team section designed to resemble the following:

https://i.sstatic.net/xHE3y.png

Here is the current scss file being used:

.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;
  }
}

The component has been divided into different sections as apparent, but it seems like every n+1 team member displays their image on the opposite side. Is there a way to reverse the column order?

csstwitter-bootstrapbootstrap-4

Answer №1

Click here to access the documentation on CSS Flexible Box Layout Ordering Flex Items

To better understand the code, please refer to the explanatory snippet below:


<div class="box">
    <div><a href="#">1</a></div>
    <div><a href="#">2</a></div>
    <div><a href="#">3</a></div>
    <div><a href="#">4</a></div>
    <div><a href="#">5</a></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

Explore the possibilities of the CSS nth element selector, which includes options for both odd and even selections.

:nth-child(odd) {
  float: right;
}

//or utilize flex-direction for additional flexibility
flex-direction: row-reverse;

For more information, refer to this resource

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for Assistance with Creating a Non-Adhesive Footer in CSS?

My goal is to have the footer remain at the bottom of the page, which I achieved using the following CSS: position: absolute; bottom: 0px; While this code does bring the footer to the bottom as desired, the issue arises when the window is resized to a sm ...

c#asp.netcssasp.net-mvc-3footer

The sequence of HTML attributes

Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...

javascripthtmlcssattributescoding-style

What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails? This is what I am looking for: Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/ If not possible with just CSS, then a jQuery solution is acceptable. Is it o ...

javascriptjquerycssmobile-safari

"Enhance User Experience with a Bootstrap Dropdown Button Offering Block Level Function

I'm attempting to modify a bootstrap 3 dropdown button to fully utilize the width properties of .btn-block class. It appears that the dropdown button does not respond in the same way as regular buttons. Below is my current code: <div class="row"&g ...

csstwitter-bootstraptwitter-bootstrap-3

Navigation menu elements out of place

I am facing some challenges while trying to create a horizontal navigation: The first element appears to be displaced Is there a better way to position the text centered below the icon? Currently, I have used a tag for this purpose. Also, how can I us ...

htmlcss

Shape with a dark border div

Having some trouble with creating this particular shape using CSS border classes. If anyone can assist in making this black box shape using Jquery, it would be greatly appreciated. Check out the image here. ...

javascriptjqueryhtmlcss

Card carousel rotation

Apologies for the vague title, I'm unsure how to properly label my issue. I have a section set up with cards, but I'm aiming to create something resembling a menu that functions like a carousel. Essentially, I want to include right and left arro ...

jquerycsshtmlbootstrap-4

Expandable Bootstrap collapse and accordion open horizontally, not vertically

I want to use Bootstrap collapse but I want to keep my div-s with the content beneath each link, mainly because that's how i need it to work on mobile (the menu is a column and that the content opens under each link). Unfortunately, on website I have ...

htmlbootstrap-4

Stepping up your design game by customizing the bootstrap container class for multiple pages

Looking for a solution to customize container-width, @gutter-width, and @column-width for two pages - landing and home? Let's discuss how to achieve this. Currently using less framework and merging all less files for production code deployment. Need ...

csstwitter-bootstrapresponsive-designgridless

Unable to retrieve table header information when clicking on a table cell

My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it give ...

javascripthtmlcssreactjshtml-table

Transitioning images smoothly and responsively with jQuery, creating a beautiful

Hey there! I'm looking for some help with transforming this jQuery effect. Instead of having fixed sized images, I want to set the size in percentage (width:100%; height:auto) so they can be responsive. Any creative ideas or suggestions? <scri ...

javascriptjqueryhtmlcsscross-fade

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...

javascripthtmlcss

What might be causing the excessive margins in my Bootstrap grid layout?

I've recently integrated Bootstrap into my Angular project using npm, but I'm facing an issue with excessive margins on the sides. Can anyone provide assistance? Below is the code snippet: <div class="container"> <div class="row"> ...

htmlangulartwitter-bootstrapbootstrap-4

The default appearance of bootstrap-select appears to be flawed

Utilizing the amazing Bootstrap-select jQuery plugin has brought two unexpected default styles to my selectboxes. Despite inserting the necessary CSS and JS files into my website, all select boxes are displaying with these peculiar default settings (withou ...

jquerycsswordpressbootstrap-select

Enhancing Google Custom Search Engine with Bootstrap3 and CSS3 styling

I'm looking for guidance on how to customize the appearance of a Google Custom Searchbar on my website. Is it feasible to style it using CSS3 and Bootstrap 3 like the example in the image below? Any assistance is greatly appreciated. ...

javascripthtmlcsstwitter-bootstrap-3google-custom-search

Adjusting the Size and Spacing of Vuetify's Buttons

Why are buttons extending beyond the card width? https://i.stack.imgur.com/wVRoQ.png I'm facing difficulties customizing the buttons within the cards. I want to eliminate all padding so that the black border perfectly encloses the icon without any un ...

cssvuejs2vuetify.js

Choosing the image that represents your website in Safari web previews

Every time I check iCloud.com on my Safari top sites, the thumbnail is always the same. I'm curious about how I can automate this for my own website. ...

javascripthtmlcss

What is the best way to verify HTML using RSS?

Looking to improve my skills in HTML/CSS/PHP development, I'm faced with a challenge when it comes to validating code that contains content beyond my control, such as an RSS feed. For instance, on my home page, which is a .php document containing bot ...

phphtmlcssvalidation

Mysterious purple squares mysteriously popping up around elements in a WordPress website utilizing CSS Bootstrap 4

While browsing certain websites on specific browsers that utilize Bootstrap 4 as a framework within a WordPress site, I've noticed some elements displaying strange purple squares when visited. Any ideas on the cause of this issue and how it can be res ...

htmlcsswordpressbootstrap-4web-frontend

Tips for displaying specific information using Javascript depending on the input value of an HTML form

I am working on an HTML form that includes a dropdown list with four different names to choose from. window.onload = function(){ document.getElementById("submit").onclick = displaySelectedStudent; } function displaySelectedStu ...

javascripthtmlcssstringforms