Reorganizing elements on mobile screens using a grid system

I am working with a simple grid layout:

.container{
   display:grid;
   gap:20px;
   grid-template-columns: repeat (12, 1fr)
}
.container >*{
   grid-column-start: span 12
}
@media(min-width:768px){
   .item{
      grid-column-start:span 6
   }  
}
<div class="container">
    <div class="item"><img src="..."></div>
    <div class="item"><p>Text</p></div>
    <div class="item"><img src="..."></div>
    <div class="item"><p>Text</p></div>
    <div class="item"><img src="..."></div>
    <div class="item"><p>Text</p></div>
</div>

How do I position the image in the second row to the right on screens larger than 768px, and have the text on the left side?

htmlcss

Answer №1

Here is an example of how you can achieve this.

.container{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(12, 1fr)
}
.container >*{
  grid-column-start: span 12
}
@media(min-width:768px){
  .item { grid-column-start:span 6;} 
  .item:nth-child(4n-1) {grid-column: 7 / span 6;}
  .item:nth-child(4n) {grid-column: 1 / span 6;}
  .container {grid-auto-flow: dense;}
}
<div class="container">
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></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

What steps can be taken to properly display dateTime values in a data table when working with JavaScript (VueJS) and PHP (Laravel)?

I am facing an issue where I am unable to save user inputted date-time values from a modal into a data table. Despite receiving a success message, the dateTime values are not being added to the table. My payload only displays the state and approval fields ...

javascriptphphtmlvue.jsdatetime

Is it possible for jQuery UI Dialog to function similar to an iFrame?

Is there a way to set up my dialog box with a form so that when the form is submitted, only the dialog box changes instead of the browser location? ...

javascriptjqueryhtmljquery-ui

Is there a way to incorporate a subtle fading effect when transitioning between images?

I find this continuously changing image every 5 seconds to be a bit overwhelming without any smooth transition. Is there a way I can implement a short fade effect like what is possible in CSS? import React, { useEffect, useState } from "react"; ...

javascripthtmlcssreactjs

Issue with Logo and Header Containers Incorrectly Scaling

I've been working hard to make sure that both my company logo image and the background image resize accordingly based on the screen size. However, I'm facing an issue where if the background image resizes correctly, the logo image remains unchang ...

htmlcssimage

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

javascriptjqueryhtml

Can you trigger the playback of a sound file by clicking on a specific URL?

Can a sound file be played when clicking depending on the URL? For example: url/sample/#1 Click to play sound1 url/sample/#3 Click to play sound2 ...

javascripthtmlaudio

Using jQuery variables as selectors for CSS key-value pairs

Is there a way to transform code like this: $("div").css({ "top": var1, "height": var2, etc. }); Into something like this: var dir = "top"; var length = "height"; $("div").css({ dir: var1, length: var2, etc. }); Currently, I ...

jquerycsskey

Does altering HX-GET in JavaScript have no impact on the outcome?

I need assistance with implementing HTMX in my FastAPI application that uses Tailwind and MongoDB for the database. Here is the form I am working with: <form id="currencyForm" hx-get="/currency_history_check/EUR" hx-target="#re ...

javascripthtmlfastapihtmx

In my PHP script, I'm seeking a solution to include a numeric value and then

Greetings, I'm experiencing a peculiar issue where only the first section appears when I submit a number. Here is the code I've implemented and I would greatly appreciate any assistance or guidance. Essentially, my intention is to have a user red ...

phphtmlcssweb

The Node.js application is unable to locate the source file path

Currently, I am in the process of creating a simple quiz application. While working on this project, I encountered an issue with linking a JS file in an HTML template. Even though I have confirmed that the path is correct, every time I run my node app, the ...

javascripthtmlnode.jsmongodbexpress

Creating several divs with an image tag within each div individually using Jade HTML pre-processor

Check out the code snippet below: <div id="cubeSpinner"> <div class="face one"> <img src="/images/Windows%20Logo.jpg" class=""> </div> <div class="face two"> <img src="/images/Turtle.jpg" class ...

javascripthtmlnode.jspug

Guide on creating a line chart resembling the one in Highcharts library

I would like to create a line chart using the HighChart library, using data similar to what is shown in the image below. However, I am not familiar with HTML, CSS, or JavaScript and don't know how to go about developing this. Can anyone provide guidan ...

javascripthtmlcsshighchartsdata-visualization

Customized navigation bar with a fixed pointer height

I designed a test page with a menu bar that features a triangular pointer when hovered over. Everything looks good except for the issue where the blue menu bar expands in height when adding the pointer at the bottom of the bar. My initial thought is to giv ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

What causes my elements to move to the left when the screen size decreases with bootstrap?

If you want a better understanding of the situation, looking at images might be helpful. Here is how it typically appears: https://i.sstatic.net/mBZDp.jpg And this is how it appears on smaller screens: https://i.sstatic.net/8CuIs.jpg For smaller scree ...

htmlcssbootstrap-5

Struggling to align the loader in the center

I'm having trouble centering a loader in my application. It seems to be slightly shifted to the left side of the screen. Take a look at this fiddle to see it in action: Loader Below is the HTML code: <div class="loader"> <div class ...

htmlcss

An easy guide to displaying an HTML string in a DIV with Angular 6

I have a Angular 6 application that interacts with the python API. The API responds with HTML data that I want to display on my existing page within a specific div element. I have attempted various methods but have not been successful. Test.ts public myT ...

csstypescriptangular6

Is there a way for me to send a form containing pre-existing data from a different page?

Seeking advice: I realize that utilizing jQuery's ajax function may be the simplest approach, however I am facing an issue with the form field names. The var_dump below displays the typical values submitted by the form using test data. It appears that ...

javascriptphphtmlforms

Versatile Function for Handling Dropdown Changes

I am faced with the challenge of executing a javascript function when multiple select elements are changed. I want to create a versatile function that can be set as the onchange method for various select elements. The following code accomplishes this task ...

javascripthtml

Error alert: The system could not locate Google when trying to drop pins

Every time I attempt to place pins on the map, I encounter the "google is not defined" error. The map itself displays without any issues until I add the lines following the initMap() function. I have come across similar posts but none of the suggested so ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Target specific content for printing with CSS (media query)

Currently, I am working on creating a print media query in order to only print specific content from the screen: <div> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry' ...

htmlcss