swap image and text on alternating rows

cifarquhar · cifarquhar · commit 229fd0cac04b · 2025-09-30T15:05:21.000+01:00
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@ <h3>Facts About Glasgow</h3>
             </div>
             <img src="https://c.files.bbci.co.uk/16F94/production/_130100149_pa-20938626-1.jpg" alt="The Duke of Wellington Statue in Glasgow">
         </section>
-        <section class="content">
+        <section class="content inverted">
             <div>
                 <h3>Facts About Manchester</h3>
                 <ul>
@@ -54,7 +54,7 @@ <h3>Facts About Birmingham</h3>
             </div>
             <img src="https://cdn.pixabay.com/photo/2017/08/24/07/36/birmingham-2675655_1280.jpg">
         </section>
-        <section class="content">
+        <section class="content inverted">
             <div>
                 <h3>Facts About London</h3>
                 <ul>
diff --git a/styles.css b/styles.css
@@ -17,3 +17,7 @@ img {
     display: flex;
     justify-content: space-around;
 }
+
+.inverted{
+    flex-direction: row-reverse;
+}

Original file line number	Diff line number	Diff line change
`@@ -17,3 +17,7 @@ img {`
`17`	`17`	`display: flex;`
`18`	`18`	`justify-content: space-around;`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+.inverted{`
	`22`	`+ flex-direction: row-reverse;`
	`23`	`+}`