source ordering for small grid

Because you only mention the medium. So it will be medium up. If you also want small, then you should use the small-8 and small-4.

yes if i use small-8 small-8 it will work but i wanted to be small-12 small-12

I think you should also add the columns class. Then you put in:

<div class="small-12 medium-8 push-4 columns">title< /div> < div class="small-12 medium-4 pull-8 columns">img< /div>

iam using columns class in my code, the title still shows up first in the small grid when i used ur code

Ahhh i'm sorry. Now i see the problem.

u need to select the format you want to push. zo small-push-2 or medium-push-8

theres no small-push-12 in the foundation.css file

<div class="medium-8 small-12 small-push-12 push-8">title</div>
<div class="medium-4 small-12 small-pull-12 pull-8">img</div>

in the small devices, i want the img and title to take up 100% of the screen, the img comes first in the browser but in the html file the title is written first for SEO

Of Course there is no small-push-12. Because that does not make any sense. The width is 12 columns max. So where should is push to? small-push-11 is the highest you can do.

Do this:

<div class="row">
  <div class="medium-4 small-12 medium-push-8 columns">img</div>
  <div class="medium-8 small-12 medium-pull-4 columns">title</div>
 </div>

so theres no way i show the img above the title in small grid?

Again... use my code:

<div class="row">
  <div class="medium-4 small-12 medium-push-8 columns">img</div>
  <div class="medium-8 small-12 medium-pull-4 columns">title</div>
 </div>

i used ur code and the result for small was https://dl.dropboxusercontent.com/u/26481347/Capture.PNG and for large and medium was https://dl.dropboxusercontent.com/u/26481347/Capture%202.PNG

Use my latest code. I made a type error and corrected it really quickly. U are using the old one. (you are really quick if you catched that)

i notice u wrote the img first in the html but i want the title first

just use it. please.

now the large and medium r wrong lool

Sorry but when i run it like that. It shows the word title on the left. on the same row it show image.

when i shrink the viewport to small then the image is on top....

yes what u saying is right, but what i want to achieve is large/medium: img left, title right..on small:img first title under it.. in the html the title col written first zn img col. i want to ask the question on dif way.. is it possible to source order a col that takes 100% to show up second on the screen?

plz check this http://cdpn.io/njkgs

Have you tried swapping place with img and title. That way when the browser will read the img code first and then reads the title code, that way the title goes under it. Then apply the codes from foundation to get the image of the left and title on the right at medium and higher. I used you codepen. and replaced you HTML code to this:

<div class="row">
    <div class="medium-4 small-12 columns">img</div>         
    <div class="medium-8 small-12 columns">title</div>
</div>

that make sense but what if i want the title first for SEO purposes, plus theres other situation in my code where i wanna switch 2 columns in the small grid only and they also small-12 coz if its small-11 and smaller zn no problem with push and pull, the problem here is when its small-12.. is there any solution for this in foundation 5?