Arranging the columns in bootstrap 4 for optimal display on mobile devices

Ensuring my columns and rows are aligned to the same height and position is essential. I have successfully achieved this in desktop view, but I am encountering challenges when it comes to mobile view.

I have included 3 images for reference. The first depicts the correct desktop view, the second showcases the mobile view, and the third illustrates the ideal mobile view I am aiming for.

https://i.sstatic.net/7Skp8.jpg

<div class="container">
    <div class="row align-items-start">
        <div class="col-md">
            <h2>Környezetvédelem</h2>
        </div>
        <div class="col-md">
            <h2>Történetünk</h2>
        </div>
        <div class="col-md">
            <h2>Kapcsolat</h2>
        </div>
    </div>
    <div class="row align-items-center">
        <div class="col-md ">
            <img class="img-fluid indep-sub-image" src="img/indep-menu/kornyezetvedelem.jpg">
        </div>
        <div class="col-md">
            <img class="img-fluid indep-sub-image" src="img/indep-menu/tortenetunk.jpg">
        </div>
        <div class="col-md">
            <img class="img-fluid indep-sub-image" src="img/indep-menu/kapcsolat.jpg">
        </div>
    </div>
</div>

My goal is to maintain the proper alignment in desktop view, especially when the title spans two lines, while also achieving the correct order in mobile view.

htmlcssbootstrap-4

Answer №1

Combine the rows instead of creating two separate ones. Include the image below your heading to display it. Hopefully, this solution works for you.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row align-items-start">
      <div class="col-md-4">
        <h2>Környezetvédelem</h2>
        <img class="img-fluid indep-sub-image" src="img/indep-menu/kornyezetvedelem.jpg">
      </div>
      <div class="col-md-4">
        <h2>Történetünk</h2>
        <img class="img-fluid indep-sub-image" src="img/indep-menu/tortenetunk.jpg">
      </div>
      <div class="col-md-4">
        <h2>Kapcsolat</h2>
        <img class="img-fluid indep-sub-image" src="img/indep-menu/kapcsolat.jpg">
      </div>
    </div>

  </div>
</body>

</html>

Answer №2

Feel free to give this solution a try.

<div class="container">
  <div class="row">
    <div class="col-md-4">
        <h2>Environmental Protection</h2>
        <img class="img-fluid indep-sub-image" src="img/indep-menu/environmental-protection.jpg">
    </div>
    <div class="col-md-4">
        <h2>Our Story</h2>
        <img class="img-fluid indep-sub-image" src="img/indep-menu/our-story.jpg">
    </div>
    <div class="col-md-4">
        <h2>Contact Us</h2>
        <img class="img-fluid indep-sub-image" src="img/indep-menu/contact-us.jpg">
    </div>
  </div>
</div>

Answer №3

<div class="container">
    <div class="row align-items-start">
        <div class="col-md-4 col-sm-4">
            <h2>Environmental Protection</h2>
        </div>
        <div class="col-md-4 col-sm-4">
            <h2>Our Story</h2>
        </div>
        <div class="col-md-4 col-sm-4">
            <h2>Contact</h2>
        </div>
    </div>
    <div class="row align-items-center">
        <div class="col-md-4 col-sm-4">
            <img class="img-fluid indep-sub-image" src="img/indep-menu/environmental.jpg">
        </div>
        <div class="col-md-4 col-sm-4">
            <img class="img-fluid indep-sub-image" src="img/indep-menu/our-story.jpg">
        </div>
        <div class="col-md-4 col-sm-4">
            <img class="img-fluid indep-sub-image" src="img/indep-menu/contact.jpg">
        </div>
    </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

Problem with jQueryUI Sortable cancel property preventing input editing

Currently, I am utilizing jquery-3.2.1.min.js and jquery-ui.min.js version 1.12.1 The task at hand is to create a sortable list where certain elements are not sortable (specifically, other sortable lists). It is crucial that the input elements remain edit ...

javascriptjqueryhtmljquery-uijquery-ui-sortable

How to divide an HTML string into an array using PHP

I am in need of some assistance from you all. The issue I am facing involves dealing with a string of HTML that looks like this: <h4>Some title here</h4> <p>Lorem ipsum dolor</p> (some other HTML here) <h4>Some other title ...

phphtmlarraysaccordiondomdocument

I am looking to reposition the navbar span tag so that it appears beneath the icon, utilizing both HTML and CSS

I'm currently working on a navbar design with 5 items, each containing an icon and a span tag. However, I'm facing difficulties in aligning the span tag below the icon for all 5 items in the navbar. Despite my best efforts, I have been unable to ...

htmlcss

Tips for creating a MaterialUI list that wraps to the next line?

import React from 'react'; import { List, ListItem, } from '@material-ui/core'; import { makeStyles, createStyles, } from '@material-ui/core/styles'; import clsx from 'clsx'; import VideoCard from './VideoCa ...

cssreactjsmaterial-ui

Incorporating JavaScript/jQuery into Razor: A Comprehensive Guide

In one of the views in my ASP.NET MVC4 application, I have created an input field and a button. My goal is to pass the value entered in the input field as a parameter to a controller when the button is clicked. The issue I'm facing is that while I can ...

jqueryasp.nethtmlasp.net-mvc-4razor

Enhance the worth of text box

Is there a way to adjust the value of a textbox by one on keyup, keydown, or tap events? Check out this example. Here is the HTML structure: <div class="right-content" id="rc-0" style="height: 250px;"> <div class="right-cont-main" id="rcm-0" s ...

javascriptjqueryhtmlcss

Changes influencing independent div elements

My goal is to design a front-end screen with images labeled steps 1-4 lined up next to each other. The concept is that when the user hovers over one of these steps, the corresponding image should fade in below them in a separate div. Upon removing the curs ...

csshtmlfrontendtransition

Utilize JQuery to Extract HTML Elements

I'm working on developing a Chrome extension and one of my tasks is to extract specific text from the webpage I am currently visiting and store it in a variable. I have been attempting to achieve this using jQuery, however, none of the solutions I&apo ...

javascriptjqueryhtml

Modifying Label text dynamically using jQuery on Click event

My website HTML contains the following code snippet: <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.rings.js"></script> The contents of jquery.rings.js are as follows: $('input[type="image"]') ...

javascriptphpjqueryhtml

Display or conceal the nearest element that was clicked

http://jsfiddle.net/KevinOrin/xycCx/1/ jQuery('.happening-main-text .readmore').click(function() { jQuery('.divmore').toggle('slow'); return false; }); ...

javascriptjqueryhtml

Choose the field and set the default value

In my current project, I have a page dedicated to listing all categories with links to individual category pages for modification purposes. On the category page, I want to include a Select field for the Category Name, displaying all preset categories with ...

phphtmlsqlarraysmysqli

Vertically animating an image using jQuery

I have been experimenting with trying to make an image appear as if it is floating by using jQuery to animate it vertically. After some research, I stumbled upon this thread: Animating a div up and down repeatedly which seems to have the solution I need. H ...

javascriptjqueryhtmlcssjquery-animate

Angular: Ensuring Paypal button does not display twice without a hard reload

I have encountered an issue with a PayPal payment button on my page. The button displays fine when I generate it for the first time, but if I try to generate it again for another order, it doesn't show up. I have to hard reload the page to get it to w ...

htmlangulartypescriptionic-frameworkpaypal

The importance of formatting in coding and how to effectively apply it

Why is proper code formatting so important for programmers? What are the benefits of following consistent formatting rules, and what exactly are these rules? Many programmers prefer to write their code like this: <html> <head> < ...

phphtmlcssformatting

What is a practical method for achieving a double-lined border effect?

Here is what I am referring to (with two different colors): I had to create two span divs and apply a border-right on one and a border-left on the other as my solution. However, I believe there must be a more efficient way to do this with less code. HTML ...

css

HTML code for an admin login form

Looking for a way to create a login form without PHP in HTML for an administrator account, so the admin information remains secure and cannot be easily accessed from a database. Any suggestions or tips on how to achieve this? ...

html

The mask effect is not only darkening the background image but also affecting the color of my header content

Why is the mask I applied making not only my background image darker but also my h1 and button? <!-- Header - set the background image for the header in the line below--> <header class="bg-image d-flex justify-content-center al ...

htmlbootstrap-5

Accelerate blinking timer by utilizing CSS3 animations

I'm currently developing a quiz application that includes a timer counting down from 10 seconds to 0 seconds. As the timer reaches closer to 0 seconds, I am looking to implement a feature where my text blinks faster and faster. Additionally, I would l ...

htmlcsscss-transitionscss-animations

What is the best way to trigger a function following a user's selection from a form-control on a webpage?

I am looking for a way to automatically execute a function when a year is selected without needing a button. I am using HTML, JavaScript, and bootstrap 5. Any suggestions on how to achieve this? Thank you. function onSelect() { console.log('Hel ...

javascripthtmlwebbootstrap-4bootstrap-5

Conceal particular table cells through jQuery

I am a beginner in the world of jQuery. My goal is to hide certain cells in a row when clicked, and have them displayed again when clicked once more. I've searched high and low for a solution, but all I find is how to hide entire rows. Here's an ...

javascriptjqueryhtml