Change the order of the table data elements using the nth-child CSS selector

I need the second td in my table to appear on top of the first one when I resize the screen.

@media screen and (min-width: 200px) and (max-width: 872px) {
td :nth-child(1) {display:bottom}


td :nth-child(2) {display:top}

}
<table border="0" cellspacing="0" cellpadding="0>
  <tr>
    <td>
   dhklsadhfjl;skdjflskdjfzx,nc,zmxnv;lkjdfsd;lakfjas,nxc
</td>
    <td><div class="w3-content w3-section" style="max-width:500px">

  <img class="mySlides w3-animate-fading" src="1ma63N35/1.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="1ma63N35/2.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="1ma63N35/3.jpg" style="width:100%">
  <img class="mySlides w3-animate-fading" src="1ma63N35/4.jpg" style="width:100%">
    <img class="mySlides w3-animate-fading" src="1ma63N35/5.jpg" style="width:100%">
</div></td>
  </tr>
</table 

css

@media screen and (min-width: 200px) and (max-width: 872px) { td :nth-child(1) {display:bottom}

td :nth-child(2) {display:top}

}

htmlcss

Answer №1

The most efficient method is to utilize a CSS grid, which allows for tabular-like styling without the constraints or extensive coding associated with tables. Using grid-area, you can easily modify the order of a listing.

.grid {
  display: grid;
  grid-template-columns: auto minmax(min-content, 500px);
  grid-auto-rows: auto;
  grid-gap: 10px;
}

img {
  display: block;
}

@media only screen 
  and (min-width: 200px) 
  and (max-width: 872px) {
    .grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "pictures"
        "text";
    }
    
    .pictures {
      grid-area: pictures;
    }
    
    .text {
      grid-area: text;
    }
}
<div class="grid">
  <div class="text">
   dhklsadhfjl; skdjflskdjfzx, nc, zmxnv; lkjdfsd; lakfjas, nxc
  </div>
  <div class="pictures">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/1.jpg">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/2.jpg">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/3.jpg">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/4.jpg">
    <img class="mySlides w3-animate-fading"
         src="1ma63N35/5.jpg">
  </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

Utilizing the map function to display elements from a sub array

I'm struggling to print out the comments using the map function in this code: class Postcomment2 extends React.Component { uploadcomment = () => { return this.props.post.comments.map((comment) => { return <div>{comment["comment"]}< ...

javascripthtmlreactjsdatabasedictionary

Is it possible to invoke this PHP function within an HTML document?

I'm in the process of developing a social networking platform that allows users to receive notifications when someone follows or unfollows them. The purchased plugin includes a function for notifying users about the number of notifications they have. ...

phphtml

Guide to extracting additional data from a JSON array upon selection of a value within an option tag using jQuery

Seeking assistance to enhance the display of museum information when a museum name is selected from an option dropdown box. The data is extracted from a json array. Although I managed to populate the option box with the museum names, I am encountering di ...

javascriptjqueryhtmljson

Tips for Resizing google reCAPTCHA

The problem's image is shown below: Below is the code snippet related to the issue: <div class="text-xs-center" id="DIVCATCHA" runat="server"> <asp:HiddenField runat="server" ID="hdnImageSelected" /> <div class="g-recaptcha" data- ...

htmlcssasp.netrecaptcha

A single list is utilized by multiple HTML5 selects

If I have 10 fields in a form, each requiring a select option from the year 1950 to 2017, can I create one list from that range and have each select reference it? Or do I need to make ten separate lists for each select? Edit: An example could be the birth ...

javascripthtml

Animating lines with JQuery beneath navigation links

Currently in the process of revamping my portfolio website, and it's still a work in progress. Recently stumbled upon a jquery tutorial that enables a line to animate under anchor elements on hover, which I find quite intriguing. However, I am facing ...

jqueryhtmlcssanchor

Use an if statement in Angular to conditionally add a title attribute with an empty value to HTML

How can I conditionally add the title attribute to a div without creating another div and using ngIf? If the permission is true, I want to include a title in my div. Here's what my current div looks like: <div (click)="goToChangelog()&quo ...

htmlcssangular

Guide on generating a child element in a React application using server response

I have developed a react application with multiple nested routes. One of the nested routes utilizes a backend API that returns complete HTML content. My goal is to display this HTML content with the same styling in my UI without directly manipulating the ...

htmlreactjsreact-dom

Difficulty encountered when applying a CSS class with JavaScript

The Javascript function I am currently using is able to select multiple links. This behavior occurs because of the Regular expression I applied with the '^' symbol. I decided to use this approach because my links are in the following format: htt ...

javascriptjqueryhtml

Move the element that can be dragged with the identifier X to the designated drop area with the identifier

I am attempting to create a function that will allow me to drag a draggable element and drop it into a designated container using their IDs. However, I am unsure of how to get started. dropToContainer("myDraggable", "div3"); function dropToContainer(co ...

javascripthtmldrag

Instructions for inserting an anchor tag into the middle of a <p> element utilizing document.createElement("p")

When generating elements dynamically with JavaScript using document.createElement("p"), I am looking to create a paragraph element <p></p> that includes an anchor tag in the middle, creating a clickable link within the text. I aim to use JavaS ...

javascripthtml

Tips for designing a table with a stationary first column in HTML/CSS

I am looking to design a table that can be horizontally scrolled with a dynamic number of columns. The goal is to keep the first column fixed/frozen while scrolling horizontally. I attempted to achieve this using the following CSS, which successfully keeps ...

htmlcsshtml-tablecss-tables

Utilizing the NuxtJS framework to tap into video camera functionalities

I am completely new to Vue and NuxtJs. My goal is to create a webcam feature using NuxtJs, but I have encountered some challenges. <template> <div class="photobooth"> <div class="controls"> <button @click="takePhoto">Ta ...

javascripthtmlvue.jsnuxt.js

Spinning text within a circular rotation in CSS

Looking for guidance on how to center the "hallo" text inside a circle? Currently experiencing issues with the circle display in IE8 and Firefox. Any suggestions on how to fix this would be greatly appreciated. And here is the link to my code snippet: CSS ...

javascripthtmlcss

Implementing a sticky header for tables using Bootstrap

I'm experiencing a conflict because the header remains fixed only when I include the table-responsive class in my code. However, I also need the table to have overflow. Can anyone provide assistance with this issue? Using the table-responsive class ...

htmlcsstwitter-bootstrapbootstrap-5sticky

The controller is failing to effectively showcase the ng-show functionality

My webpage consists of three elements: a search bar, a search result area, and a form. The use case scenario involves showing the search bar and form div by default, while hiding the search result div. When I enter keywords into the search bar, client data ...

htmlcssangularjsionic-framework

How do I customize the appearance of an Element-UI data table in Vue?

I'm struggling to customize the color of an Element UI datatable in my project. I've tried several approaches, but so far, nothing has worked. Here is the code I am currently using: <template> <el-table :data="tableData.filter ...

cssvue.jsvuejs2vue-componentelement-ui

Adjusting data points on a radar chart.js through user interaction

I have a radar map generated using chart.js, along with some input fields where users can enter values that I want to reflect in the graph. I am exploring ways to update the chart dynamically as the user types in the values. One option is to have the char ...

javascripthtmlinputchart.jsradar-chart

Make the navigation bar stay at the top of the page when scrolling past another element with a top position of 100vh

Trying to explain a unique concept here. I want a nav bar fixed in the position of top:100vh, so that as I scroll down and reach the next section, the navbar sticks at the top rather than staying stuck at the beginning with position:fixed top:0. The aim is ...

javascripthtmlcsssass

Swap the < symbol with &gt; and & with &amp; within a specific node or location in an XML document

Hello everyone, I have a XML file with a node named Section, where certain characters like & and < are treated as invalid. I need to replace < with &lt; and & with &amp; only within the Section Node. Currently, I am using the following Java ...

javascripthtml