html - Display unordered list and image next to each other -

i'm creating website , make use of responsive design.all want display unordered list of items , image right(next to) of <ul> , when user resizes page or views on mobile device image should appear below <ul>.

i've tried altering display style of divs house <ul> , image it's still not working:

<div style="display:table">    <div style="display:table-cell; vertical-align:top;">      <ul>        <li>item 1</li>        <li>item 2</li>        <li>item 3</li>      </ul>    </div>    <div style="display:table-cell;float:right;">      <img src="images/image1.jpg" />    </div>  </div>

you use flexbox align items, use media query change display property smaller screens (change 320px width breakpoint).

.flexcontainer {    display: flex;    align-items: center;  }  @media (max-width: 320px) {    .flexcontainer {      display: block;    }  }

<div class="flexcontainer">    <div>      <ul>        <li>item 1</li>        <li>item 2</li>        <li>item 3</li>      </ul>    </div>    <div>      <img src="http://lorempixel.com/image_output/nature-q-c-120-120-1.jpg" />    </div>  </div>