diff --git a/app/assets/sass/patterns/_check-your-answers.scss b/app/assets/sass/patterns/_check-your-answers.scss
index 1f36e7aac5..553f95a3fb 100644
--- a/app/assets/sass/patterns/_check-your-answers.scss
+++ b/app/assets/sass/patterns/_check-your-answers.scss
@@ -1,14 +1,84 @@
-.check-your-answers {
 
-  td {
-    @include core-19;
-    vertical-align: top;
+.govuk-check-your-answers {
+
+  @include media(desktop) {
+    display: table;
   }
 
-  .change-answer {
-    text-align: right;
+  > * {
+    position: relative;
+    border-bottom: 1px solid $border-colour;
+
+    > * {
+      display: block;
+    }
+  }
+
+  @include media(desktop) {
+    > * {
+      display: table-row;
+      border-bottom-width: 0;
+
+      > * {
+        display: table-cell;
+        border-bottom: 1px solid $border-colour;
+        padding: em(12, 19) em(20, 19) em(9, 19) 0; // copied from Elements' td padding
+        margin: 0;
+      }
+
+      &:first-child > * {
+        padding-top: 0;
+      }
+    }
+  }
+
+  .cya-question {
     font-weight: bold;
-    padding-right: 0;
+    margin: em(12, 19) 4em em(4,19) 0;
+    // top: from Elements' td
+    // right: due to length of "change" link (adjust if you change the link to be much longer)
+    // bottom: by eye
+    // using margin instead of padding because of easier absolutely positioning of .change
+  }
+
+  > *:first-child .cya-question {
+    margin-top: 0;
+  }
+
+  @include media(desktop) {
+    // to make group of q&a line up horizontally (unless there is just one group)
+    &.cya-questions-short,
+    &.cya-questions-long {
+      width: 100%;
+    }
+
+    // recommended for mostly short questions
+    &.cya-questions-short .cya-question {
+      width: 30%;
+    }
+
+    // recommended for mostly long questions
+    &.cya-questions-long .cya-question {
+      width: 50%;
+    }
+  }
+
+  .cya-answer {
+    padding-bottom: em(9, 19); // from Elements' td
+  }
+
+  .cya-change {
+    text-align: right;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  @include media(desktop) {
+    .cya-change {
+      position: static;
+      padding-right: 0;
+    }
   }
 
 }
diff --git a/docs/views/examples/check-your-answers-page.html b/docs/views/examples/check-your-answers-page.html
index d27aeed686..4c852c25df 100644
--- a/docs/views/examples/check-your-answers-page.html
+++ b/docs/views/examples/check-your-answers-page.html
@@ -7,127 +7,125 @@
 {% block content %}
 
 <main id="content" role="main">
+  <div class="grid-row">
+    <div class="column-two-thirds">
 
-  <h1 class="heading-large">
-    Check your answers before sending your application
-  </h1>
-
-  <table class="check-your-answers">
-
-    <thead>
-      <tr>
-        <th colspan="2">
-          <h2 class="heading-medium">
-            Organisations involved
-          </h2>
-        </th>
-        <th>
-        </th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr>
-        <td>
-          Exporter
-        </td>
-        <td>
-          Exporter name<br>
-          First line of address<br>
-          Second line of address<br>
-          Contact: Contact Name<br>
-          Tel: 01234 567 890<br>
-          Email: email@email.com
-        </td>
-        <td class="change-answer">
-          <a href="#">
-            Change <span class="visuallyhidden">Exporter name</span>
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          Producer
-        </td>
-        <td>
-          Producer name
-        </td>
-        <td class="change-answer">
-          <a href="#">
-            Change <span class="visuallyhidden">Producer name</span>
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          Site of export
-        </td>
-        <td>
-          Site of export name
-        </td>
-        <td class="change-answer">
-          <a href="#">
-            Change <span class="visuallyhidden">Site of export name</span>
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          Importer
-        </td>
-        <td>
-          Importer name<br>
-          First line of address<br>
-          Second line of address<br>
-          Contact: Contact Name<br>
-          Tel: 01234 567 890<br>
-          Email: email@email.com
-        </td>
-        <td class="change-answer">
-          <a href="#">
-            Change <span class="visuallyhidden">Importer name</span>
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          Recovery facilities
-        </td>
-        <td>
-          Recovery facilities name
-        </td>
-        <td class="change-answer">
-          <a href="#">
-            Change <span class="visuallyhidden">Recovery facilities name</span>
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          Recovery site
-        </td>
-        <td>
-          Recovery site name
-        </td>
-        <td class="change-answer">
-          <a href="#">
-            Change <span class="visuallyhidden">Recovery site name</span>
-          </a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-  <h2 class="heading-medium">Now send your application</h2>
-
-  <p class="text">
-    By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
-  </p>
-
-  <div class="form-group">
-    <a href="confirmation-page" class="button">Accept and send application</a>
-  </div>
+      <h1 class="heading-large">
+        Check your answers before sending your application
+      </h1>
+
+      <h2 class="heading-medium">
+        Organisations involved
+      </h2>
+
+      <dl class="govuk-check-your-answers">
+        <div>
+          <dt class="cya-question">
+            Exporter
+          </dt>
+          <dd class="cya-answer">
+            Exporter name<br>
+            First line of address<br>
+            Second line of address<br>
+            Contact: Contact Name<br>
+            Tel: 01234 567 890<br>
+            Email: email@email.com
+          </dd>
+          <dd class="cya-change">
+            <a href="#">
+              Change <span class="visuallyhidden">Exporter name</span>
+            </a>
+          </dd>
+        </div>
+
+        <div>
+          <dt class="cya-question">
+            Producer
+          </dt>
+          <dd class="cya-answer">
+            Producer name
+          </dd>
+          <dd class="cya-change">
+            <a href="#">
+              Change <span class="visuallyhidden">Producer name</span>
+            </a>
+          </dd>
+        </div>
+
+        <div>
+          <dt class="cya-question">
+            Site of export
+          </dt>
+          <dd class="cya-answer">
+            Site of export name
+          </dd>
+          <dd class="cya-change">
+            <a href="#">
+              Change <span class="visuallyhidden">Site of export name</span>
+            </a>
+          </dd>
+        </div>
+
+        <div>
+          <dt class="cya-question">
+            Importer
+          </dt>
+          <dd class="cya-answer">
+            Importer name<br>
+            First line of address<br>
+            Second line of address<br>
+            Contact: Contact Name<br>
+            Tel: 01234 567 890<br>
+            Email: email@email.com
+          </dd>
+          <dd class="cya-change">
+            <a href="#">
+              Change <span class="visuallyhidden">Importer name</span>
+            </a>
+          </dd>
+        </div>
 
+        <div>
+          <dt class="cya-question">
+            Recovery facilities
+          </dt>
+          <dd class="cya-answer">
+            Recovery facilities name
+          </dd>
+          <dd class="cya-change">
+            <a href="#">
+              Change <span class="visuallyhidden">Recovery facilities name</span>
+            </a>
+          </dd>
+        </div>
+
+        <div>
+          <dt class="cya-question">
+            Recovery site
+          </dt>
+          <dd class="cya-answer">
+            Recovery site name
+          </td>
+          <dd class="cya-change">
+            <a href="#">
+              Change <span class="visuallyhidden">Recovery site name</span>
+            </a>
+          </dd>
+        </div>
+      </dl>
+
+      <h2 class="heading-medium">Now send your application</h2>
+
+      <p class="text">
+        By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
+      </p>
+
+      <div class="form-group">
+        <a href="confirmation-page" class="button">Accept and send application</a>
+      </div>
+
+    </div>
+  </div>
 </main>
 
 {% endblock %}