Question 108440 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap Column either always displaying vertically or always horizontally

I’m very new to working with HTML/CSS and I’m currently using Bootstrap Studio for a project. I am creating an ‘About’ section of a webpage where I have made four rows each with two columns, like this:
Image Text
Text Image
Image Text
Text Image

On Mobile / Small screens, I would like the columns to instead look like this:
Image
Text
Image
Text
Image
Text
Image
Text

I have tried changing the width of the columns at different screen sizes, I have tried changing the amount of columns per row, and there is even another instance in my page where I have managed to get this to work on a smaller scale but I can’t replicate it.

Really struggling on this as someone who is very new to all this. Would be very grateful for some help in layman’s terms as I’m not yet fully comfortable with all jargon.

Thank you very much.

Tags:

2

Answers


  1. 0

    Here is an exmple what you want to acheive.May it help you.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Simple Admin Dashboard</title>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <link rel="stylesheet" href="res/chartist.min.css">
    <style>
        img {
          height: 250px;
          object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="row">
       <div class="col-md-6 col-sm-12 m-auto">
         <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
       </div>
       <div class="col-md-6 col-sm-12">
         Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
       </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12 order-md-2">
        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
      </div>
      <div class="col-md-6 col-sm-12">
        Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
      </div>
      <div class="col-md-6 col-sm-12">
        Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12 order-md-2">
        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
      </div>
      <div class="col-md-6 col-sm-12">
        Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <img src="https://cdn.pixabay.com/photo/2023/04/21/15/17/fences-7942101_640.jpg" alt="image">
      </div>
      <div class="col-md-6 col-sm-12">
        Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus ticidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel s molestie aliquet.
      </div>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    You don’t have to do anything more just you’ve to use col-md-6 and col-12.

    As col-md-6 will get 50% of row width in greater than or equal to width of 768px and col-12 will get 100% of row width in small devices which has width of 768px or below.

    <div class="row">
 <div class="col-md-6 col-12">text</div>
</div>
<div class="row">
 <div class="col-md-6 col-12">More Text</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search