diff --git a/components/ListPageDisplays/ArticleCard.js b/components/ListPageDisplays/ArticleCard.js
index b12cb23a..239a6b18 100644
--- a/components/ListPageDisplays/ArticleCard.js
+++ b/components/ListPageDisplays/ArticleCard.js
@@ -88,6 +88,7 @@ const useStyles = makeStyles(theme => ({
   attachment: {
     minWidth: 0, // Don't use intrinsic image width as flex item min-size
     maxHeight: '10em', // Don't let image rows take too much vertical space
+    margin: '0 1em 0 0', // Add right margin that separate attachment and text with a space
   },
 }));
 
@@ -122,6 +123,7 @@ function ArticleCard({ article, highlight = '' }) {
                 <span>{c('Info box').t`reports`}</span>
               </div>
             </div>
+            <Thumbnail article={article} className={classes.attachment} />
             {(text || highlight) && (
               <ExpandableText className={classes.content} lineClamp={3}>
                 {highlight
@@ -129,7 +131,6 @@ function ArticleCard({ article, highlight = '' }) {
                   : text}
               </ExpandableText>
             )}
-            <Thumbnail article={article} className={classes.attachment} />
           </div>
         </ListPageCard>
       </a>
diff --git a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
index 00579990..5d657009 100644
--- a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
+++ b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
@@ -83,6 +83,19 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "TEXT",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id1",
+                      "replyCount": 3,
+                      "replyRequestCount": 4,
+                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                    }
+                  }
+                  className="makeStyles-attachment"
+                />
                 <ExpandableText
                   className="makeStyles-content"
                   lineClamp={3}
@@ -102,19 +115,6 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </div>
                   </div>
                 </ExpandableText>
-                <Thumbnail
-                  article={
-                    Object {
-                      "articleType": "TEXT",
-                      "createdAt": "2020-01-01T00:00:00Z",
-                      "id": "id1",
-                      "replyCount": 3,
-                      "replyRequestCount": 4,
-                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                    }
-                  }
-                  className="makeStyles-attachment"
-                />
               </div>
             </article>
           </ListPageCard>
@@ -210,6 +210,19 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "TEXT",
+                      "createdAt": "2019-01-01T00:00:00Z",
+                      "id": "id2",
+                      "replyCount": 0,
+                      "replyRequestCount": 999,
+                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ex augue. Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.",
+                    }
+                  }
+                  className="makeStyles-attachment"
+                />
                 <ExpandableText
                   className="makeStyles-content"
                   lineClamp={3}
@@ -261,19 +274,6 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </div>
                   </div>
                 </ExpandableText>
-                <Thumbnail
-                  article={
-                    Object {
-                      "articleType": "TEXT",
-                      "createdAt": "2019-01-01T00:00:00Z",
-                      "id": "id2",
-                      "replyCount": 0,
-                      "replyRequestCount": 999,
-                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ex augue. Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.",
-                    }
-                  }
-                  className="makeStyles-attachment"
-                />
               </div>
             </article>
           </ListPageCard>