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

Creating responsive images using Bootstrap CSS framework

I have been focusing on optimizing the banner below the navigation menu on this website. My goal is to make it responsive so that the player in the banner remains visible even when scaling down to iPhone size portrait. You can find the code for this secti ...

htmlcsstwitter-bootstrapresponsive

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

I came across this code on the internet http://jsfiddle.net/bvotcode/owhq5jat/ When I select a new item, the old item is replaced by the new item. How can I add more items without replacing them when I click "dropdown list"? Thank you <select id=&qu ...

javascripthtmlcssdrop-down-menu

Adding list items to an unordered list without making them draggable using jQuery

How can I allow users to build a list of sports and drag them into a "cart" using jQuery? The issue I'm facing is that the appended list items are not draggable, and I'm unsure of how to solve this problem. /* JS code for sports.html */ $(fu ...

javascriptjqueryhtmljquery-ui-draggable

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

javascriptjqueryhtmlcssgetelementbyid

- Lorem ipsum dolor sit amet, consectetur adipiscing elit

I am looking to create a list with lower-roman indexes that are enclosed in parentheses (ii), where the content of each item is indented. Here is an example: (i) lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut metus nec urna ...

htmlcsshtml-lists

How to apply gradient colors to borders using CSS

Is it possible to create a simple border bottom color with a gradient effect? div{ border-bottom:10px solid linear-gradient(#FF4000, transparent); height:20px; width:auto; background:#ccc; } <div></div> ...

css

Utilizing HTML snippets for AJAX integration

Let's dive in, I may be completely off track here. I am currently working with Wordpress. On a page I am creating an HTML select menu (Main Menu) with options that correspond to each page on the site. This menu is visible on the page. In addition, ...

phphtmlajax

Despite utilizing the here() package, Pandoc is unable to locate the image path referenced in an external HTML file that has been imported into R Markdown

As I create an HTML document with R Markdown, I incorporate external HTML documents for headers and footers. Utilizing the here() package enables relative paths within my project. However, including external HTML files via YAML in the R code disrupts the f ...

htmlrr-markdownpandoc

Generating a list of items to buy using a JSON document

So here's the json file I'm working with: [ {"task":"buy bread","who":"Sarah","dueDate":"2023-10-18","done":false}, {"task":"clean car","who":"David","dueDate":"2023-08-30","done":true}, {"task":"write report","who":"Jenny","dueDate":"2023-09 ...

javascriptjqueryhtmlajaxjson

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

htmlcss

Changing the size of the logo as you scroll through the page

I have implemented the following code to resize the logo as I scroll down the page. $(document).on('scroll', function() { if ($(document).scrollTop() >= 10) { $('.logo img').css('width', '50px'); } else ...

javascriptjqueryhtmlcss

Enhance the appearance of a custom checkbox component in Angular

I developed a customized toggle switch for my application and integrated it into various sections. Recently, I decided to rework it as a component. However, I am encountering an issue where the toggle switch button does not update in the view (it remains t ...

cssangulartypescripttoggle

The "else" statement is never being executed

Trying to create a form where users enter their first name, last name, and city. If any input is empty or contains numbers, a message should appear requesting to fill out all boxes without numbers. Otherwise, display a personalized quote using the input in ...

javascripthtmlcss

Transparent static navbar displayed above header image

Scenario I managed to develop a transparent navbar that is superimposed on top of a header image with an SVG curve attached to it. To create the transparent navbar, I modified some classes associated with it by removing bg-light. By adding the class fix ...

htmlcssnavbarbootstrap-5

How can we focus href on a <div> using CMS in PHP?

I am currently in the process of learning PHP and simultaneously tackling a redesign of a custom CMS. The CMS is written in PHP, and I have already revamped the default menu using CSS to incorporate a side slide effect. However, my next challenge is to en ...

phpjqueryhtmlhreftarget

How to stop parent event propagation in jQuery

I am facing a frustrating issue with my code. Every time I toggle a checkbox, the parent element's click event also triggers. I have experimented with various solutions like: event.stopImmediatePropagation(); event.stopPropagation(); event.preventD ...

javascripthtmljquerydomjquery-events

My JavaScript code is being executed before Chrome Auto-fill

I have successfully created form input elements in Chrome that display a floating label when focused. However, I am encountering an issue when the browser autofills the username and password fields with yellow prefilled text. The JavaScript for the float ...

javascriptjqueryhtmlcssgoogle-chrome

Utilize the id in AngularJS to bring attention to a specific row within a table

I am brand new to using angularjs. I currently have a table structured like this: HTML <table class="table table-striped" id="manageResumeTable"> <thead class="text-center text-info text-capitalize"> <th class="text-center col- ...

javascriptjqueryhtmlcssangularjs

Concealing the footer on a webpage embedded within an iframe

<script> $(document).ready(function(){ $('.mydivclass').hide(); }); </script> Looking to embed Microsoft Forms in my HTML using an iframe. Can the footer of the Microsoft Forms be removed? ...

jqueryhtmliframecross-domain

Alert popup onclick feature is malfunctioning

SOLVED: I finally figured out the issue and it is now working perfectly. I had to manually switch to Chrome instead of using the Brackets live viewer. I want an alert box to pop up when the "Home" link is clicked on my website. I tried creating a separate ...

javascripthtmlcss