"Choose between displaying the Bootstrap Column consistently in a vertical orientation or a horizontal orientation

I'm just diving into the world of HTML/CSS and currently experimenting with Bootstrap Studio for a project. My focus is on creating an 'About' section for a webpage, where I've structured four rows each containing two columns as follows:
Image Text
Text Image
Image Text
Text Image

For Mobile / Small screens, my goal is to change the column layout to appear like this instead:
Image
Text
Image
Text
Image
Text
Image
Text

I've experimented with adjusting column widths at various screen sizes, changing the number of columns per row, and have achieved similar results on a smaller scale elsewhere in my page but struggling to replicate it.

Being new to all this, I'm finding it quite challenging. Any help in simple terms would be greatly appreciated since I'm still getting comfortable with all the technical jargon.

Thank you!

htmlcssbootstrap-4bootstrap-5bootstrap-studio

Answer №1

Here is an example of what you're trying to achieve. Hopefully, it will be of assistance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Admin Dashboard with Bootstrap 5</title>
   <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdac1ddc1df">[email protected]</a>/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">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec varius justo. In hac habitasse platea dictumst. Fusce vel vestibulum sapien. Quisque pretium metus in gravida efficitur. Aenean et magna id nulla varius pulvinar ac vel augue. Sed suscipit non felis quis interdum. Suspendisse potenti.
       </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">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec varius justo. In hac habitasse platea dictumst. Fusce vel vestibulum sapien. Quisque pretium metus in gravida efficitur. Aenean et magna id nulla varius pulvinar ac vel augue. Sed suscipit non felis quis interdum. Suspendisse potenti.
      </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">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec varius justo. In hac habitasse platea dictumst. Fusce vel vestibulum sapien. Quisque pretium metus in gravida efficitur. Aenean et magna id nulla varius pulvinar ac vel augue. Sed suscipit non felis quis interdum. Suspendisse potenti.
      </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">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec varius justo. In hac habitasse platea dictumst. Fusce vel vestibulum sapien. Quisque pretium metus in gravida efficitur. Aenean et magna id nulla varius pulvinar ac vel augue. Sed suscipit non felis quis interdum. Suspendisse potenti.
      </div>
    </div>

Answer №2

All you need to do is incorporate the classes col-md-6 and col-12.

When using col-md-6, it will take up 50% of the width of the row when the screen size is greater than or equal to 768px, while col-12 will occupy 100% of the row width on devices that have a screen 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>

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

Tips for aligning spin.js spinner in the center of a bootstrap 3 modal?

I'm attempting to showcase and center the spin.js spinner within a Bootstrap 3 modal. Despite successful implementation in IE and FF using the code below, I am encountering issues in Chrome, Safari Desktop, Chrome IOS, Safari IOS. The problem appears ...

htmltwitter-bootstrapmodal-dialogspinnertwitter-bootstrap-3

Adaptable Navigation

I am currently working on creating a responsive navigation menu inspired by Bootstrap's design. However, I have encountered some challenges in implementing it. The current issue I am facing is that the navigation disappears when transitioning from a s ...

jquerycssnavigationresponsive-design

Gensim's Word2Vec is throwing an error: ValueError - Section header required before line #0

Hello everyone! I am diving into the world of Gensim Word2Vec and could use some guidance. My current task involves using Word2Vec to create word vectors for raw HTML files. To kick things off, I convert these HTML files into text files. Question Number O ...

pythonhtmlnlpgensimword2vec

slow loading background slideshow in css

Creating a simple slideshow for the background using CSS has been successful, but I am facing an issue with making all backgrounds utilize background-size: cover. I want the images to fit properly on the screen. Another problem is that the pictures take a ...

javascripthtmlcsskeyframe

Can the sidebar be positioned after the div on an HTML page?

Is it possible for the sidebar to remain static until it is reached by scrolling on the page? I want it to be positioned below the Jumbotron and then stick to the left and top when scrolling down. Currently, it's overlapping everything and adjusting z ...

htmlcssbootstrap-4css-positionsidebar

Disabling GPS with HTML5/phonegap: A step-by-step guide

Looking to create a function that can toggle GPS on and off for both iPhone and Android devices ...

javascriptandroidiphonehtmlcordova

A guide on dynamically accessing an image from the src directory using props in a Vite + React application

export default function Card(props) { return ( <card> <img className={cardCss.card__img} src={`../assets/imgs/card/${props.img}`} alt="" /> <div className={cardCss.card__stats}> ...

cssreactjsreact-propsdynamic-importvite-reactjs

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

htmlcss

Remove the ID, class, and other attributes from an HTML string using JavaScript for sanitization purposes

Can someone help me with sanitizing HTML text provided by a user? The HTML code in question is as follows: var htmlStr = `<p id="test" class="mydemo">TEhis is test</p> <pre class="css"> &lt;html> &lt;body cl ...

javascripthtml

Tips on aligning a div to the right of a headline

My goal is to have an orange circle image placed to the right of my headline <h2>. However, I am facing an issue where the circle jumps above the headline when I shrink the screen. How can I ensure that it stays on the right side no matter the screen ...

javascriptjqueryhtmlcss

Could anyone assist me in positioning my personalized Context Menu beside my cursor?

If possible, I would appreciate some assistance with my custom context menu. It may require some minor tweaks or a fresh idea on how to address the issue. Ideally, I would like to keep the HTML and CSS somewhat unchanged. [I'm not sure what to write ...

javascripthtmlcssresponsivecontextmenu

The simplest method for integrating SASS within your WordPress website

While I usually work with CSS, I've decided to tackle SASS in order to improve my efficiency. I successfully converted a CSS file from .css to .scss and it still works as expected. However, when I added variables, they didn't function properly. ...

csswordpresssass

What is the best way to achieve a set number of columns at certain breakpoints?

Is there a way to implement the following layout using Bootstrap 4? Displaying 4 columns on a large breakpoint; 3 columns on a medium breakpoint; and 1 column on a small breakpoint. Below is my current code snippet: <html> <head> ...

bootstrap-4

Gentelella Bootstrap Template - Textbox

Has anyone used the gentelella admin template before (https://github.com/puikinsh/gentelella)? I am attempting to utilize the textarea feature from this template , but it does not allow me to save data to the database. The contents will be inside the div a ...

textareatoolbarbootstrap-4gentelella

Display full desktop version on mobile devices with minimized view and no need for horizontal scrolling

While it may seem unusual, my client has requested temporarily removing responsiveness from the site to view the desktop version on mobile. I initially tried removing the responsive meta tag, but encountered horizontal scrolls on the page. My goal is to di ...

htmlcsstwitter-bootstrap

Implement a vertical scrolling animation in datatables

I am trying to utilize datatables to display all data. My goal is to have the data automatically scroll row by row every 3 seconds. This is my code, and you can also check it out on jsfiddle The intention is to showcase this data on a large screen. < ...

javascriptjqueryhtmlcssdatatables

Show input fields in a row

In an attempt to align my select form fields on the same line, I have tried adding display:inline; to both the select and label elements in my code. However, it did not produce the desired result. Here is the HTML code snippet: <form id ="myform1"> ...

css

What is the best way to maximize vertical space in every element on a page?

How can I achieve a layout similar to the image shown? I want three distinct sections: a navigation bar fixed at the bottom, and left and right sides each taking up 50% of the screen. Additionally, all boxes on the left side should have equal height. I am ...

htmlcssreactjsbootstrap-5

Tips for saving an array of objects in local storage and transferring it from one file to another

Recently delving into the world of localstorage, I've encountered an issue while attempting to store JSON data in one file and retrieve it in another. The JSON data below was fetched from a URL, and my goal is to obtain all the feed objects in the oth ...

javascriptjqueryjsonhtml

Overlay one image on top of another

Recently, I've been working on this code snippet. I am attempting to center the profile picture even when the screen width is reduced. The issue lies with using position:absolute, preventing margins:auto from functioning properly. As a workaround, I ...

htmlcssmaterialize