Display unordered list and image next to each other
<p>I'm creating a website and would like to make use of responsive design.All i want to do is display an unordered list of items and an image to the right(next to) of the <code>&lt;ul&gt;</code> and when the user resizes the page or views it on a mobile device the image should appear below the <code>&lt;ul&gt;</code>.</p>

<p>I've tried altering the <code>display</code> style of my divs which house the <code>&lt;ul&gt;</code> and the image but it's still not working:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="display:table"&gt;
  &lt;div style="display:table-cell; vertical-align:top;"&gt;
    &lt;ul&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div style="display:table-cell;float:right;"&gt;
    &lt;img src="Images/Image1.jpg" /&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>