Para eso debes usar CSS. ¿Tienes el CSS para ese codigo?
Puedes hacerlo de varias formas, pero la mas sencilla es colocar dos bloques (<div>): uno que flote a la izquierda y otro a la derecha con la propiedad float.
Y en cada bloque metes lo que te haga falta (imagenes, listas, texto...)
Por otro lado, no estas estructurando bien las etiquetas HTML. Tienes varios fallos como el poner dos span seguidos para usar dos clases o englobar listas con un span
Pero el mas destacable (y donde puedes tener mas problemas) es que no estas usando bien ninguna de las listas que has creado: <ul> <ol>
Las listas en HTML se definen asi:
Código HTML:
<ol>
<li> elemento 1</li>
<li> elemento 2</li>
<li> elemento 3</li>
<li> elemento 4</li>
. . .
</ol>
<ul>
<li> elemento 1</li>
<li> elemento 2</li>
<li> elemento 3</li>
<li> elemento 4</li>
. . .
</ul>
Toda lista esta compuesta de elementos que se definen entre etiquetas <li> y tu no los has puesto. Además, las listas ordenadas <ol> ya colocan la numeración automáticamente, no hace falta que escribas tú los números.
Te lo digo porque eso es lo primero que debes solucionar antes de empezar con el CSS, si no, vas a tener problemas de visualización dependiendo del navegador que uses.