I am building a responsive site that has very specific requirements for the mobile view that I seem unable to combine with how the desktop layout is looking. Can anyone think of a way that leaves the desktop layout the same but on mobile, the "Unimportant Information" section moves all the way down to the end instead?
@media (min-width: 576px) {
#page {
margin-left: 20px;
margin-right: 20px;
}
}
@media (min-width: 1040px) {
#page {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
}
#left-panel {
background-color: #eeeeee;
}
a {
color: #c00;
text-decoration: none;
}
.panel-padding {
width: 100%;
padding: 0px 10px;
}
.table-keyword {
text-align: right;
font-weight: bold;
width: 100px;
}
.figure-caption {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<div id="page">
<div class="container-fluid">
<div class="row">
<div id="left-panel" class="col-sm-4 mt-3 p-3 pb-0">
<img src="https://media.istockphoto.com/vectors/no-image-vector-symbol-missing-available-icon-no-gallery-for-this-vector-id1128826884?k=20&m=1128826884&s=612x612&w=0&h=3GMtsYpW6jmRY9L47CwA-Ou0yYIc5BXRQZmcc81MT78=" alt="screenshot" width="100%">
<p>
<h5>Unimportant Info:</h5>
Lorem ipsum dolor sit amet.
</p>
</div>
<div id="right-panel" class="col-sm-8 mt-3 p-2 py-0">
<div class="panel-padding">
<h3>
Title
</h3>
<p>
Subtitle
</p>
<table class="table">
<tbody>
<tr>
<th class="table-keyword">Access:</th>
<td>
<a href="#">somelink</a><br>
<span style="font-size: small;">Captured 2018-08-02. Restricted access - no reuse. © xmlpiccyj14, 2019</span>
</td>
</tr>
<tr>
<th class="table-keyword">Preview:</th>
<td>
<figure class="figure">
<img src="https://media.istockphoto.com/vectors/no-image-vector-symbol-missing-available-icon-no-gallery-for-this-vector-id1128826884?k=20&m=1128826884&s=612x612&w=0&h=3GMtsYpW6jmRY9L47CwA-Ou0yYIc5BXRQZmcc81MT78=" alt="screenshot" width="100px">
<figcaption class="figure-caption">Screenshot</figcaption>
</figure>
</td>
</tr>
<tr>
<th class="table-keyword">Contributors:</th>
<td>
Artist 1 <br> Artist 2
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>Right now as you see I am using bootstrap for breakpoint management, I also looked into CSS Grid but it seems it won't provide a solution for my case since I don't want the Unimportant Info part to align with some grid element on the right like this:
[IMG] | [Title]
| [Subtitle]
–––––––––––––––––––+––––––––––––––––––
[Unimportant Info] | [Rest of Content]
I tried to think of a solution with Flexbox with flex-direction: column but I don't think there's a way to make a flexbox column have exactly two items (IMG and Unimportant Info on the left side, Title/subtitle and the rest of the content on the right side). Any minimum working example where
IMG | Title
Unimportant Info | Rest
on desktop becomes
IMG
Title
Rest
Unimportant Info
on mobile would be greatly appreciated!
In the end I found a solution using CSS Grid myself:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"img right"
"bla right";
}
.left-top {
grid-area: img;
}
.left-bottom {
grid-area: bla;
background: green;
}
.right {
grid-area: right;
background: lightblue;
}
@media only screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
grid-template-areas:
"img"
"right"
"bla";
}
}<div class="grid">
<div class="left-top">
<img id="screenshot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" alt="screenshot" width="100%">
</div>
<div class="left-bottom">
Unimportant Information
</div>
<div class="right">
Title <br> Rest
</div>
</div>