Can't seem to find the answer to this but I need to allow search engines to read a numbered list. However, the steps are spanned over multiple divs (all with their own images etc) and without rewriting the code (e.g. changing the divs), I wondered if it was possible to allow search engines to understand the list.
I can add content inside the divs etc without messing up the layout e.g. li but the li would be in multiple divs and I'm not sure if bing/google could understand if 1,2,3 are not all inside the same ol

e.g.
If I had

<div>
	<div>
		<h3>step 1</h3>
    </div>
    <div>
		<p>step 1 text</p>
    </div>
	<div>
	<img src="Step 1 image.jpg" />
    </div>
</div>
<div>
	<div>
		<h3>step 2</h3>
    </div>
    <div>
		<p>step 2 text</p>
    </div>
	<div>
	<img src="Step 2 image.jpg" />
    </div>
</div>
<div>
	<div>
		<h3>step 3</h3>
    </div>
    <div>
		<p>step 3 text</p>
    </div>
	<div>
	<img src="Step 3 image.jpg" />
    </div>
</div>

could I get a search engine to understand it as a numbered list?

You can use relevant css

div { 
    border   : 1px green solid; 
    /* use easyclearing on div (or this workaround) */
    overflow : auto; 
    height   : auto;
}

/* clear */
ul + * { clear: both; }

ul {
   float : left;
   height : 160px; /* (30 + 2px) * 5 */ 

   -webkit-transform : rotate(-90deg);
   -moz-transform : rotate(-90deg);
   -ms-transform : rotate(-90deg);
   -o-transform : rotate(-90deg);
   transform : rotate(-90deg);
}

li:nth-child(5n+1) { clear: right; }

li {
   width      : 30px;
   height     : 30px;  
   float      : right;
   margin     : 1px;
   background : #ccc;

   -webkit-transform-origin : 50% 50%;
   -moz-transform-origin : 50% 50%;
   -ms-transform-origin : 50% 50%;
   -o-transform-origin : 50% 50%;
   transform-origin : 50% 50%;

   -webkit-transform : rotate(90deg);
   -moz-transform : rotate(90deg);
   -ms-transform : rotate(90deg);
   -o-transform : rotate(90deg);
   transform : rotate(90deg);
}

I hope it will help you.

Yes, Bing/Google would probably see separate li tags inside differents ol tag as items from different lists!

This is what I would do, I would encapsulate the divs inside a unique ol, removing the styling.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

<!-- language: lang-html -->

<ol>

  <li>
    <div>
        <div>
            <h3>step 1</h3>
        </div>
        <div>
            <p>step 1 text</p>
        </div>
        <div>
        <img src="Step 1 image.jpg" />
        </div>
    </div>
  </li>
  
  <li>
    <div>
        <div>
            <h3>step 2</h3>
        </div>
        <div>
            <p>step 2 text</p>
        </div>
        <div>
        <img src="Step 2 image.jpg" />
        </div>
    </div>
  </li>
  
  <li>
    <div>
        <div>
            <h3>step 3</h3>
        </div>
        <div>
            <p>step 3 text</p>
        </div>
        <div>
        <img src="Step 3 image.jpg" />
        </div>
    </div>
  </li>

</ol>

<!-- end snippet -->

hope it helps, :).